这个过滤器的作用是: 从数组中过滤出需要的项,放入新的数组并返回这个新数组。
<div ng-repeat="item in list | filterByKey:'name':'李'"></div>
详情看下面的示例，一目了然
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body ng-app="demoApp" ng-controller="demoCtr">
<ul>
<li ng-repeat="item in list | filterByKey:'name':'李'">
{{item.name}}--{{$index}}
</li>
</ul>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.controller('demoCtr', ['$scope', function ($scope) {
$scope.list = [
{name:"李三",age:"18"},
{name:"张雪",age:"21"},
{name:"李媛",age:"24"},
{name:"李宁",age:"23"},
{name:"张成",age:"25"},
{name:"赵嘉成",age:"22"}]
}]);
demoApp.filter('filterByKey', function () { // key为变量
return function (input, key, searchkey) {
var newArr = [];
if (!searchkey) {
return input;
}
for (var i = 0, l = input.length; i < l; i++) {
if (input[i][key].toString().indexOf(searchkey) !== -1) {
newArr.push(input[i]);
}
}
return newArr;
};
})
</script>
</html>
在本文的结尾温馨提示一下，之所以我为什么输出$index，是因为我想告诉大家这个$index不能用作与数据做绑定，只能作序号呈现，看输出是不是就明白了。因此，不要用$index用作与任何业务相关的逻辑的部分。
网友评论