отфильтровать результат поиска с помощью angularjs

Я пытаюсь создать страницу поиска с помощью angularjs. Мне нужно указать некоторые поля (флажок, радио, возрастной диапазон и т. д.) в качестве фильтров для результатов поиска. В этой демонстрации я сосредоточусь только на флажках. Я дал демо-код в приведенном ниже списке плунжеров

http://plnkr.co/edit/PMQQzf63uy8Pzq4fVIYQ?p=preview

Таким образом, на приведенной выше странице, когда пользователь выбирает «Желтый», поле «показать» для «результата 1» должно стать ложным. И если пользователь далее выбирает «Круг», то поле «показать» для «результата 2» должно быть ложным. Пользователь может выбрать более одного цвета или формы.

Хотя я не писал длинный код, я думаю о следующем:

whenever there is user action on filters{ //select or deselect
   for each result{ //"result 1", "result 2", "result 3"
      result.show=true

      //The below condition is m:n check and hence is a nested for loop.
      if none of the selected colors match the colors in the result 
         result.show=false

      //The below condition can be achieved using a single for loop
      if none of the selected shapes match the shape of the result
         result.show=false
   }
}

Я хотел бы знать любые шаблоны проектирования, на которые я могу ссылаться при разработке вышеуказанной функции. Также, если в angularjs есть какие-либо простые альтернативы для достижения вышеуказанного.

Изменить: на самом деле я хочу скрыть результаты, которые не соответствуют критериям фильтра. Я использовал поле «показать» только для демонстрации примера.


search angularjs filtering angularjs-directive angularjs-service
person Srik    schedule 29.05.2014    source источник
comment
Существует разница в фильтрации значений, которая скрывает значения, не соответствующие критериям фильтрации, и ваш случай, когда вы хотите показать значения, но изменить их (свойство show изменено на false с true) в зависимости от того, что выбрано. В таких случаях вам остается только следить за флажками и вручную изменять значения.   -  person callmekatootie    schedule 29.05.2014
comment
@callmekatootie Я хочу скрыть несовпадающие результаты. У меня было это как поле внутри объекта, так как это будет легко объяснить. Я добавил пояснение к своему исходному сообщению.   -  person Srik    schedule 29.05.2014
comment
Вам, вероятно, потребуется настроить собственный метод фильтрации и применить его к файлу ng-repeat="result in results".   -  person Surreal Dreams    schedule 29.05.2014

Ответы (1)


arrow_upward
2
arrow_downward

Это то, что вы ищете?

Сделайте <div ng-repeat="result in results"> в своем HTML равным <div ng-repeat="result in results | filter:searchFn">

И это как js.

var sampleFilter = angular.module('sampleFilter', []);

sampleFilter.service('lookups',function(){
    var colors = [
        {"id":1, "name":"Red"},
        {"id":2, "name":"Green"},
        {"id":3, "name":"Yellow"}
    ];
    var shapes = [
        {"id":1, "name":"Square"},
        {"id":2, "name":"Rectangle"},
        {"id":3, "name":"Circle"}
    ];
    this.colors = function(){
        return colors;
    }
    this.shapes = function(){
        return shapes;
    }
});

sampleFilter.service('search',function(){
    var results = [
        {"id":1, "colors":[1,2], "shape":2, "show":true},
        {"id":2, "colors":[1,3], "shape":1, "show":true},
        {"id":3, "colors":[2,3], "shape":3, "show":true}
    ];
    this.results = function(){
        return results;
    }
});

sampleFilter.controller('FilterController',['$scope', 'lookups', 'search', function($scope, lookups, search){
    $scope.colors = lookups.colors();
    $scope.shapes = lookups.shapes();
    $scope.results = search.results();

  $scope.isFilterColor = function(result){
    var found = false;
    angular.forEach($scope.colors, function(value,index){
        if(value.selected){
          console.log(value.id);
          if(result.colors.indexOf(value.id)!= -1)
            found = true;
        }
    });
    return found;
  };

  $scope.isFilterShape = function(result){
    var found = false;
    angular.forEach($scope.shapes, function(value,index){
        if(value.selected){
          if(result.shape == value.id)
            found = true;
        }
    });
    return found;
  };

    $scope.searchFn = function (result) {
      if ( $scope.isFilterShape(result) && $scope.isFilterColor(result) ) {
        return true;
      }
  };

}]);

Я превратил словари поиска в массивы, поэтому на html-странице вам нужно будет внести небольшие изменения, чтобы имена цветов и форм отображались правильно.

person user1135469    schedule 29.05.2014
comment
спасибо за Ваш ответ. Мне может понадобиться несколько дней, чтобы убедиться в этом. - person Srik; 02.06.2014