JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://underscorejs.org/underscore.js"></script>
<body ng-app>
<h2> Angular Demo with BootStrap and Underscore.js</h2>
<div ng-controller="ItemCtrl">
Total Items - {{items.length}}
<ul class="unstyled">
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.done">
<span class="done-{{item.done}}"> {{item.txt}} </span>
</li>
</ul>
<form class="form-horizontal">
<div class="form-group">
<input type="text" ng-model="itemToAdd" placeHolder="Add Item"/>
<button class="btn" ng-click="add()">
<i class="icon-plus-sign"></i> Add
</button>
</div>
<button class="btn" ng-click="clear()">
<i class="icon-trash"></i> Clear Completed Items
</button>
</form>
</div>
</body>
CSS
.done-true
{
text-decoration:line-through;
color:grey;
}
JavaScript
function ItemCtrl($scope)
{
$scope.items = [
{txt:"Angular is Awsome", done:false},
{txt:"Next is Node.js", done:false}
];
$scope.add = function() {
$scope.items.push({txt:$scope.itemToAdd,done:false});
$scope.itemToAdd = "";
}
$scope.clear = function(){
//Here we will use Underscore as simplest library to work with Collections
$scope.items = _.filter($scope.items, function(item){
return !item.done;
});
}
}