AngularJS Example:
by dingen2010
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body ng-app="myApp" ng-controller="mycontroller">
<form ng-submit="addtask()">total nr of tasks: {{myvar.length}}
<br />remaining: {{remaining()}}
<input type="text" ng-model="newtask" />
<ul >
<li ng-repeat="var in myvar">
<input type="checkbox" ng-model="var.done" /> <span class="done-{{var.done}}">{{var.text}}</span>
</li>
</ul>
<button type="submit">add</button>
</form>
</body>
CSS
.done-true {
text-decoration: line-through;
color: grey;
}
JavaScript
angular.module('myApp', [])
function mycontroller($scope) {
$scope.myvar = [{
text: 'bert',
done: false
}, {
text: 'ed',
done: true
}, {
text: 'pet',
done: false
}];
$scope.addtask = function () {
$scope.myvar.push({
text: $scope.newtask,
done: false
});
}
$scope.remaining = function () {
var count = 0;
angular.forEach($scope.myvar, function (t) {
if (!t.done) {
count++
} else {
count += 0;
}
});
return count;
}
}