Как заставить фильтры работать с массивом в angularjs

Question

Я пытаюсь создать собственный фильтр для фильтрации соответствующего массива значений в angularjs.Структура массива ниже

["tag1","tag2"]

Теперь мне нужно отфильтровать все объекты, имеющие теги, соответствующие id1,id2 .. Ниже приведен фильтр, который я пробовал

var autoFilter = angular.module("autoFilters",[]);
autoFilter.filter('arrayData', function (){
return function(){
    return ["id1","id2"];
}
//$scope.arrayValues = ["id1","id2"];

});

и код пользовательского интерфейса ниже

<li style="cursor:pointer" ng-cloak class="list-group-item" ng-repeat="values in suggestionResults | arrayData">{{values.id}} -- {{values.title}}</li>

Но данные не отображаются.Можете ли вы помочь мне, где я делаю неправильно.Код Plunker доступен ниже

Plunker здесь

Answer 1

см. Код ниже :) На мой взгляд, это не лучший подход и определенно будет иметь проблемы с производительностью для больших списков, но он работает (теперь я использовал 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 к изменяемой информации и на этом действии повторно отфильтруйте $ scope.suggestionResult изисходный ответ. данные