AngularJS 匹配过滤器的三种基本使用方法

24. November 2016 笔记 0

第一种 通过过滤器直接匹配 {{data | filter:’lijian’}}//匹配所有字段中包含lijian字符串的记录

第二种 参数中使用对象形式,匹配指定属性的数据 {{data | filter:{name:’lijian’}}} 匹配字段为lijian的记录

第三种 参数使用自定义函数匹配相应数据 {{data | filter|test}}  使用函数test返回的条件匹配记录。

<!DOCTYPE HTML>
<html ng-app=”lijian”>
<head>
<title>Angular</title>
<script src=”js/angular1.6.min.js” type=”text/javascript”></script>
<style type=”text/css”>
li{
list-style: none;
}
.odd{
color: red; //奇数行颜色
}
.even{
color: blue;//偶数行颜色
}
</style>
</head>
<body>
<div ng-controller=”test”>//定义控制器
<ul>
<li ng-repeat=”ss in names | orderBy:’-score’ |limitTo:3 | filter:findscore” ng-class-odd=”‘odd'” ng-class-even=”‘even'”>
{{$index+1}}
<span>{{ss.name}}</span>
<span>{{ss.sex}}</span>
<span>{{ss.score}}</span>
</li>
</ul>
</div>
<script type=”text/javascript”>
angular.module(“lijian”,[])
.controller(“test”,[“$scope”,function($scope){
$scope.names=[
{name:’lijian1′,sex:’male1′,score:’1′,age:1},
{name:’lijian2′,sex:’male2′,score:’2′,age:2},
{name:’lijian3′,sex:’male3′,score:’3′,age:3},
{name:’lijian4′,sex:’male4′,score:’4′,age:4},
{name:’lijian5′,sex:’male5′,score:’5′,age:5},
{name:’lijian6′,sex:’male6′,score:’6’,age:6},
];
$scope.findscore=function(e){
return e.age<5;
}
}])
</script>
</body>
</html>


Leave a Reply

Your email address will not be published. Required fields are marked *