For this chapter, I created an HTML file called forms.html, whose initial content is similar to what I used to describe directives in earlier chapters, as shown in Listing 12-1.
Listing 12-1. The Contents of the forms.html File
<!DOCTYPE html>
<html ng-app=”exampleApp”>
<head>
<title>Forms</title>
<script src=”angular.js”></script>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script>
angular.module(“exampleApp”, [])
.controller(“defaultCtrl”, function ($scope) {
$scope.todos = [
{ action: “Get groceries”, complete: false },
{ action: “Call plumber”, complete: false },
{ action: “Buy running shoes”, complete: true },
{ action: “Buy flowers”, complete: false },
{ action: “Call family”, complete: false }];
});
</script>
</head>
<body>
<div id=”todoPanel” class=”panel” ng-controller=”defaultCtrl”>
<h3 class=”panel-header”>
To Do List
<span class=”label label-info”>
{{(todos | filter: {complete: ‘false’}).length}}
</span>
</h3>
<table class=”table”>
<thead>
<tr><th>#</th><th>Action</th><th>Done</th></tr>
</thead>
<tr ng-repeat=”item in todos”>
<td>{{$index + 1}}</td>
<td>{{item.action}}</td>
<td>{{item.complete}}</td>
</tr>
</table>
</div>
</body>
</html>
This is a slight variation on previous examples because I have added a span element that displays the number of complete to-do items as a Bootstrap label, like this:
…
<span class=”label label-info”>{{(todos | filter: {complete: ‘false’}).length}}</span>
…
The inline data binding I used relies on a filter to select those to-do objects whose complete property is false. I explain how filters work in Chapter 14, but you can see how the browser displays the forms.html file in Figure 12-1.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.