版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/stu_20052369/article/details/87072589
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module('repeatExample', [])
.controller('exampleController', ['$scope', function ($scope) {
$scope.friends = [
{ name: 'John', age: 25, gender: 'boy' },
{ name: 'Jessie', age: 30, gender: 'girl' },
{ name: 'Johanna', age: 28, gender: 'girl' },
{ name: 'Joy', age: 15, gender: 'girl' },
{ name: 'Mary', age: 25, gender: 'girl' },
{ name: 'Peter', age: 95, gender: 'boy_a' },
{ name: 'Sebastian', age: 50, gender: 'boy' },
{ name: 'Erika', age: 27, gender: 'girl' },
{ name: 'Patrick', age: 40, gender: 'boy' },
{ name: 'Samantha', age: 60, gender: 'girl' }
];
$scope.personObj = { 'name': 'jamie', 'age': '33', 'gender': 'male' },
$scope.lt25 = function (e) {
return e.age > 25
}
}]);
</script>
</head>
<body ng-app="repeatExample">
<div ng-controller="exampleController">
<p>1.遍历数组</p>
<ul>
<li ng-repeat="friend in friends">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
<p>2.遍历对象:</p>
<div ng-repeat="(key,value) in personObj">
key={{key}}
value={{value}}
</div>
<p>或者</p>
<div ng-repeat="(key,value) in personObj">
key={{key}}
</div>
<p>或者</p>
<ul>
<li ng-repeat="(key,value) in personObj">{{key}}-{{value}}</li>
</ul>
<P>3.过滤器:</P>
<P>所有属性值中包含25</P>
<ul>
<li ng-repeat="friend in friends|filter: 25">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
<p>所有属性值中包含a</p>
<ul>
<li ng-repeat="friend in friends|filter: 'a'">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
<p>name中包含a</p>
<ul>
<li ng-repeat="friend in friends|filter: {name:'a'}">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
<p>或者</p>
<ul>
<li ng-repeat="friend in friends|filter: 'a' track by friend.name">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
<P>age>25</P>
<ul>
<li ng-repeat="friend in friends|filter: lt25">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
<p>name中包含a,age>25</p>
<ul>
<li ng-repeat="friend in friends|filter: {name:'a'}|filter: lt25">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
<p>4.保存匹配结果:</p>
<p>把匹配到的结果另存到results数组变量,可供外部使用</p>
<ul>
<li ng-repeat="friend in friends|filter: {name:'a'} as results">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
<p>或者</p>
<ul>
<li ng-repeat="friend in friends|filter: 'a' as results2 track by friend.name">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
<p>结果</p>
<ul>
<li ng-repeat="friend in results">{{friend.name}}-{{friend.age}}-{{friend.gender}}</li>
</ul>
</div>
</body>
</html>