如何让滤镜在angularjs中使用数组
如何让滤镜在angularjs中使用数组
提问于 2018-05-29 15:16:46
我正在尝试创建一个自定义筛选器来筛选angularjs中匹配的值数组。下面的数组结构
["tag1","tag2"]现在我需要过滤标签与id1,id2匹配的所有objs。下面是我试过的过滤器
var autoFilter = angular.module("autoFilters",[]);
autoFilter.filter('arrayData', function (){
return function(){
return ["id1","id2"];
}
//$scope.arrayValues = ["id1","id2"];})；
和下面的UI代码
<li style="cursor:pointer" ng-cloak class="list-group-item" ng-repeat="values in suggestionResults | arrayData">{{values.id}} -- {{values.title}}</li>但是数据并没有显示出来。你能帮我指出我哪里做错了吗？下面提供了柱塞代码
回答 1
Stack Overflow用户
发布于 2018-05-29 16:04:18
请看下面的代码:)在我看来，这不是最好的方法，对于更大的列表肯定会有一些性能问题，但它确实可以做到这一点(现在我使用了indexOf(2)，但你可以传递任何正确/错误的参数)
var autoFilter = angular.module("autoFilters",[]);
autoFilter.controller("filterController",['$scope','$http', function ($scope,$http) {
$scope.searchSuggest = function(){
//$http({method: 'GET', url: 'json/searchSuggestions.json'}).success(function(data) {
$http.get("assets.json").then(function(response) {
//var str = JSON.stringify(response);
//var arr = JSON.parse(str);
$scope.suggestionResult = response.data;
console.log($scope.suggestionResult);
//$scope.arrayData = ["asset_types:document/data_sheet","asset_types:document/brochure"];
}).catch(function activateError(error) {
alert('An error happened');
});
}
$scope.showProduct = function(){
}
}]);
autoFilter.filter('arrayData', function (){
return function(data){
// if you are using jQuery you can simply return $.grep(data, function(d){return d.id.indexOf('2') >-1 });
return data.filter(function(entry){
return entry.id.indexOf('2') > -1
})
}
});但是，我有过处理大型列表的经验，建议您避免使用单独的过滤器，而是在.js代码中操作它。当您使用$http.get查询数据时，您可以很容易地过滤数据，如下所示：
$scope.suggestionResult = response.data.filter(function(){
return /* condition comes here */
} 这样，您就不会重载DOM，并帮助浏览器处理AngularJS有时缓慢的摘要周期。
如果您需要它是动态的(例如，过滤条件可以由用户更改)，则向可修改的信息添加ng-change、$watch或ng-click，并在该操作上从原始response.data重新过滤$scope.suggestionResult
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50578460
复制相关文章
相似问题
腾讯云开发者
