Добавление ячейки таблицы с графиком / AngularJS / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: AngularJS

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 382

Количество символов:

Посмотрели: 2423 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: angularjs, Snippet, сниппет, ангуляр, Angular, Bootstrap, ангулар, html

Поделился: IZOTOP

Добавлено: 2016-01-15 в 17:05

Метка: 1581765137

⇄ ⇅

<div class="block">
<div class="bar form-control" ng-repeat="item in items" style="height:{{item.val*3}}px; margin-top:{{300-item.val*3}}px">
{{item.val}}%
</div> 
</div>
<hr />
<div ng-controller="tableController">
<table>
<tr ng-repeat="item in items">
<td><input class="form-control" ng-model="item.label"/></td> 
<td><input ng-model="item.val" ng-change="verife(item)"/> %</td>
</tr> 
</table>
<hr />
<button ng-click="add()" class="btn btn-default">Добавить</button>
</div> 
 
</div>
</div>
</div>

myApp.controller('tableController',function($scope,Items){ 
 $scope.items=Items;
 $scope.add=function(){ 
 $scope.items.push({val:0}); 
 };
 
$scope.verife=function(item){ 
 if (item.val>100) item.val=100; 
 if (item.val<0) item.val=0; 
 };
}); 
 
 myApp.controller('chartController',function($scope,Items){ 
 $scope.items=Items; 
}); 
</script>

BootstrapTema

Добавление ячейки таблицы с графиком

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0