Question

我试图创建一个自定义过滤器来过滤angularjs中匹配的值数组。

下面的数组结构

["tag1","tag2"]

现在我需要过滤所有匹配id1,id2标签的obj ..以下是我尝试的过滤器

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>

但数据没有出现。你能帮我解决我做错的地方吗？ Plunker Code可在下面找到

plunker here

Answer 1

请参阅下面的代码:)在我看来，这不是最好的方法，并且肯定会对较大的列表有一些性能问题，但它确实有效（现在我使用了indexOf(2)但是你可以通过任何truthy / falsy argument）

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到可修改的信息，并在该操作上重新过滤$ scope.suggestionResult来自最初的response.data

如何使过滤器在angularjs中使用数组

1 个答案: