AngularJS Example:
by dandoyon
HTML
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<ul class="unstyled">
<li ng-repeat="todo in todos.$filter(donefilter)">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
JavaScript
function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false},
{text:'learn angular2', done:true},
{text:'build an angular2 app', done:false},
{text:'learn angular3', done:true},
{text:'build an angular3 app', done:false}];
$scope.donefilter = function(item) {
console.log(item);
return item.done;
}
}
TodoCtrl.$inject = ['$scope'];