bra*_*r19 4 javascript angularjs
在我的angularjs应用程序中,我通过json获得了这样的数据示例:
{"id":"1a", "name": "aaa", "emails": {{"123@123.com"}, {"123@123.info"}}},
{"id":"2a", "name": "aba", "emails": {{"23@123.com"}, {"3@123.info"}}},
{"id":"3a", "name": "aab", "emails": {{"3@123.com"}, {"3@123.info"}}},
出于性能原因,我没有使用过滤器进行ng-repeat,但使用ng-show模式......
所以在控制器中我有这样的代码(搜索是我的输入值):
$scope.$watch('search', function(newVal, oldVal) {
$scope.filteredArray = $filter('filter')($scope.users, $scope.search, newVal);
});
但它甚至在id中搜索,例如我输入a并从id获取它,但我不需要字段ID ...
那么如何仅在特定领域中使用过滤器进行搜索？
如果你关心性能,可能最好不要使用它$filter('filter').假设您的数据是JSON,您可以执行以下操作:
function contains(src, value, except) {
var key;
switch(typeof src) {
case 'string':
case 'number':
case 'boolean':
return String(src).indexOf(value) > -1;
case 'object':
except = except || [];
for(key in src) {
if( src.hasOwnProperty(key) &&
except.indexOf(key) < 0 &&
contains(src[key], value, except)
) {
return true;
}
}
}
return false;
}
angular.module('app', []).
factory('appService', function() {
var data = [
{"id":"1a", "name": "aaa", "emails": ["123@123.com", "123@123.info"]},
{"id":"2a", "name": "aba", "emails": ["23@123.com", "3@123.info"]},
{"id":"3a", "name": "aab", "emails": ["3@123.com", "3@123.info", ["1@123.com", "2@123.info"]]}
];
return {
getFilteredData: function(filter, except) {
return filter ? data.filter(function(item) {
return contains(item, filter, except)
}) : data.slice(0);
}
}
}).
controller('appController', ['$scope', 'appService', function($scope, appService) {
$scope.search = '';
$scope.$watch('search', function(val) {
$scope.data = appService.getFilteredData(val, ['id']);
});
}]);<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="appController">
<input ng-model="search" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"/>
<ul>
<li ng-repeat="item in data">{{::item}}</li>
</ul>
</body>
</html>上面的代码将在所有数据字段中进行深度搜索,并且除了作为参数传递的字段列表之外的项目(在此示例中['id'])
提示#1:在Angular中实现业务逻辑是一种不好的做法,它为此目的提供服务.
提示2:如果您有大量数据集来显示,去抖动过滤器的变化将是从性能的角度来看是非常有益的.
提示#3:如果您的数据集项是不可变的,您可以利用一次性绑定(使用{{::item}}语法)并通过减少Angular创建的手表数来加速您的应用.
| 归档时间： |
|
| 查看次数： |
3638 次 |
| 最近记录： |