I am going to continue working with the directives.html file in this example. In Listing 11-1, you can see that I have removed some of the markup from the previous chapter in order to simplify the example and prepare for the directives that I am going describe in this one.
Listing 11-1. The Contents of the directives.html File
<!DOCTYPE html>
<html ng-app=”exampleApp”>
<head>
<title>Directives</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</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 ng-repeat=”prop in item”>{{prop}}</td>
</tr>
</table>
</div>
</body>
</html>
All of the content from the previous chapter that controlled how the to-do items were laid out has been removed, and I have returned to using a simple table. You can see how the browser displays the directives.html file in Figure 11-1.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.