angularjs - 使用angularjs过滤搜索结果

Question

我正在尝试使用 angularjs 构建一个搜索页面。我需要提供一些字段(复选框、 radio 、年龄范围等)作为搜索结果的过滤器。对于这个演示，我只关注复选框。我在下面的插件列表中给出了演示代码

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

基本上，在上面的页面中，当用户选择“黄色”时，“结果 1”的“显示”字段应该变为假。如果用户进一步选择“Circle”，则“result 2”的“show”字段应该为 false。用户可以选择不止一种颜色或形状。

虽然我没有写过冗长的代码，但下面是我想到的:

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 中有任何简单的替代方法可以实现上述目标。

编辑:其实我想隐藏不符合过滤条件的结果。我使用字段“show”只是为了演示示例。

Answer 1

这就是您要找的东西？

制作<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 页面上您需要进行一些细微的更改以使颜色和形状名称正确显示。