<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<meta charset="UTF-8">
<title>指令练习</title>
<link rel="stylesheet" href="../css/bootstrap/css/bootstrap.css" />
<link href="../css/bootstrap/css/bootstrap-theme.css" />
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
angular.module("exampleApp",[])
.controller("defaultCtrl",function($scope){
$scope.data={};
$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>
<style>
td>*:first-child{font-weight: bold;}
</style>
</head>
<body ng-controller="defaultCtrl">
<div id="todoPanel" class="panel" >
<h3 class="panel-header">To Do List</h3>
<div class="checkbox well">
<label>
<input type="checkbox" ng-model="todos[2].complete" />
Item 3 is complete
</label>
</div>
<table class="table table-striped">
<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>
<span ng-hide="item.complete">(Incomplete)</span>
<span ng-show="item.complete">(Done)</span>
</td>
</tr>
</table>
</div>
</body>
</html>
从这一段HTML代码中，我们可以了解到angular的显示和隐藏简单用，运行结果如图
我使用了ng-show和ng-hide指令来控制表格中每一行最后一格中的span元素的可见性。
。。。 <td> <span ng-if="!item.complete">(Incomplete)</span> <span ng-if="item.complete">(Done)</span> </td> 。。。