<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app = angular.module(‘myapp‘, []);
app.factory(‘averages‘, function(){
var avgs = {};
avgs.count = [
{
name : ‘zhangsan‘,
age : 35
},
{
name : ‘lisi‘,
age : 25
},
{
name : ‘wangwu‘,
age : 18
}
];
return avgs;
});
function avgCtrl($scope, averages){
$scope.avgs = averages;
}
</script>
</head>
<body>
<div ng-controller="avgCtrl">
<input type="text" ng-model="search.name" />
<ul>
<li ng-repeat="count in avgs.count | filter:search >
<h1>{{count.name }}</h1><h2>{{count.age}}</h2>
</li>
</ul>
</div>
</body>
</html>
ng-repeat可以理解为forin，当然ng-repeat要比我们所理解的forin强大的多
ng-repeat能结合过滤器实现更加功能
过滤列表：filter:search 查找匹配search的数据（如果为字符串则忽略大小写）
排序：orderBy:‘age ‘ 按年龄升序排序，orderBy:‘-age ‘ 按年龄降序排序
列表截取：limitTo:2 按正序显示2条数据 limitTo:-2 按逆序显示2条数据
其他过滤器：
时间戳格式化：date 例子{{ timestamp(时间戳) | date: ‘yyyy-MM-dd HH:mm:ss’}}
大小写：lowercase ,uppercase 例子：{{ ‘abc’ | uppercase }}
AngularJS-ng-model+ng-repeat实现搜索框,布布扣,bubuko.com
时间： 2024-12-19 02:56:35