一.迭代器:
使用ng-repeat=“xx in xxx”
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body></span></span>
<span style="font-size:14px;"><span style="font-size:14px;">function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "xiaomi",
"snippet": "为发烧而生."},
{"name": "meizu™",
"snippet": "好看."}
];
}</span></span>
二.过滤器
参考链接
http://www.geekcome.com/content-10-1906-1.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
其他可以不看,只需要看
Search: <input ng-model="query">
<li ng-repeat="phone in phones | filter:query">
即可,这里绑定了一个query数据模型,使用fileter过滤保留含有该数据模型的数据。
效果图:
图1.1
图1.2
图1.3
使用filter过滤器:filter函数使用query的值来创建一个只包含匹配query记录的新数组。
ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。