<html>
<head>
<title>Angular Model Property Watch and Reset Directive</title>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type='text/javascript' src="script.js"></script>
<script type='text/javascript' src="https://rawgit.com/long2know/angular-directives-general/master/src/isState.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl as vm">
<h2>List One - Directive Driven</h2>
<table class="table">
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in vm.items track by $index" is-state="i.isSelected" is-state-class="vm.className" is-state-timeout="vm.timeout">
<td class="td-checkbox">
<input type="checkbox" ng-model="i.isSelected">
</td>
<td ng-bind="i.id" />
<td ng-bind="i.name" />
</tr>
</tbody>
</table>
<!-- <button ng-click="vm.addItem()">Add Item</button> -->
<br/>
<h2>List Two - Animate Class Driven</h2>
<table class="table">
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in vm.items2 track by $index" ng-class="{ '{{vm.className}}': i.isSelected }">
<td class="td-checkbox">
<input type="checkbox" ng-model="i.isSelected" ng-change="vm.itemListClick(i)">
</td>
<td ng-bind="i.id" />
<td ng-bind="i.name" />
</tr>
</tbody>
</table>
</div>
</body>
</html>
.is-state,
.is-state-add.is-state-add-active {
color: #FFFFFF;
background-color: #a94442 !important;
}
.is-state a, .is-state-add.is-state-add-active a {
color: #FFFFFF !important;
}
.is-state-remove.is-state-remove-active {
background-color: #FFFFFF !important;
}
.is-state-add, .is-state-remove {
-webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}(function () {
angular.module('myApp.controllers', []);
angular.module('myApp.services', ['ngResource', 'ngAnimate']);
var myApp = angular.module('myApp', [
'myApp.controllers',
'myApp.services',
'long2know',
'ngSanitize',
'ui.bootstrap',
'ui.router',
'ui']);
var myController = function ($scope, $timeout, $animate, $log) {
var vm = this,
initItems = function () {
vm.items = [];
vm.items2 = [];
for (var i = 1; i < 6; i++) {
vm.items.push({ id: 'list1_' + i.toString(), name: "Item1 " + i.toString() });
vm.items2.push({ id: 'list2_' + i.toString(), name: "Item2 " + i.toString() });
}
},
init = function () {
vm.timeout = 3000;
vm.className = 'is-state';
$timeout(function () { setTimeout(initItems(), 2000) }, 0);
};
vm.addItem = function () {
vm.items.push({ name: "Item " + vm.items.length.toString() });
};
vm.itemListClick = function (item) {
$timeout(function () { item.isSelected = false; }, vm.timeout);
};
init();
};
myController.$inject = ['$scope', '$timeout', '$animate', '$log'];
angular.module('myApp.controllers')
.controller('myCtrl', myController);
myApp.run(['$log', function ($log) { $log.log("Start."); }]);
})()
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.