<button ng-init="shouldShow = true" ng-click="shouldShow = !shouldShow">Flip the shouldShow variable</button> <div ng-show="shouldShow"> <h3>Showing {{ shouldShow }}</h3> </div> <div ng-hide="shouldShow"> <h3>Hiding {{ shouldShow }}</h3> </div>
ng-repeat
ng-repeat指令遍历一个数据集合中的每个数据元素，加载HTML模版把数据渲染出来。被重复使用的模版元素，就是我们绑定了这个指令属性的DOM元素。每一个使用模版渲染的DOM元素都有自己的scope。
在更多的解释之前，我们先看一个例子。假设我们的controller里有这样一个数据元素的数组：
$scope.roommates = [ { name: 'Ari'}, { name: 'Q'}, { name: 'Sean'}, { name: 'Anand'} ];
在view里我们可以用ng-repeat来遍历这个集合里的数据：
<ul> <li ng-repeat="person in roommates">{{ person.name }}</li> </ul>
对赋予ng-repeat的表达式稍作改动，我们还可以用它遍历一个由成对的key-value数据组成的集合。例如，假设我们有一个人名和他们最喜欢的颜色的数据集合：
$scope.people = { 'Ari': 'orange', 'Q': 'purple', 'Sean': 'green' }
要遍历它，我们可以给ng-repeat指令属性赋予这个表达式: (key, value) in object:
<ul> <li ng-repeat="(name, color) in people">{{ name }}'s favorite color is {{ color }} </li> </ul>
您可能感兴趣的文章: