Question

现在我的数据结构就像

product = [{att1:'2',att2:'red',att3:'gold'},
    {att1:'1',att2:'blue',att3:'wood'},
    {att1:'2',att2:'green',att3:'plastic'},
    {att1:'1',att2:'red',att3:'plastic'}]

我在网页上有一个过滤器，它有三个部分：att1，att2，att3。用户无需为每个部件选择选项。

对于过滤器att1，它有两个选项：“1”和“2”。
过滤器att2有2个选项：“红色”“蓝色”和“绿色”
过滤器att3它有3个选项：“gold”，“wood”和“plastic”。

我可以获得所选的选项。例如： {att1:['2'],att3:['gold','plastic']}或{att1:['1']}

我的问题是，如何使用product.filter过滤产品数据？谢谢！

Answer 1

您可以使用易于使用的自定义过滤功能，我使用att1但您可以将其扩展到所有字段：

＆＃13;

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope) {
  $scope.products = [{att1:'2',att2:'red',att3:'gold'},
    {att1:'1',att2:'blue',att3:'wood'},
    {att1:'2',att2:'green',att3:'plastic'},
    {att1:'1',att2:'red',att3:'plastic'}];

  $scope.filterFunction = function(element) {
    return element.att1.match(/^Ma/) ? true : false;
  };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <form class="form-inline">
      <input ng-model="query" type="text"
        placeholder="Filter by" autofocus>
    </form>
    <ul ng-repeat="product in products | filter:query">
      <li>{{product}}</li>
    </ul>
    
    
    <ul ng-repeat="product in products | filter:filterFunction">
      <li>{{product}}</li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

我对这个特定的逻辑进行了抨击，使用三个嵌套循环并不是非常好，但确实可以完成这项工作。我相信你可以通过使用一些地图或其他东西来进一步优化它，但我只是通过蛮力方法完成它：）

read()

angular.module('myApp',[])
  .service('ProductService', function(){  
    return {
      products:[
        {att1:'2',att2:'red',att3:'gold'},
        {att1:'1',att2:'blue',att3:'wood'},
        {att1:'2',att2:'green',att3:'plastic'},
        {att1:'1',att2:'red',att3:'plastic'}
      ]
    }
  })
  
  .controller('TestCtrl', function(ProductService){
    this.ProductService = ProductService;
    this.filterObject1 = {att1:['2'],att3:['gold','plastic']};
    this.filterObject2 = {att1:['1']};
  })
  
  .filter('productFilter', function(){
    return function(input,filterObj){
      if(!filterObj){
        return input;
      }
      var newArray = [];
      var filterKeys = Object.keys(filterObj);
      
      for(var i=0;i<input.length;i++){
        var curElement = input[i];
        innerLoops:
        for(var j=0;j<filterKeys.length;j++){
          var curKey= filterKeys[j];
          for(var k=0;k<filterObj[curKey].length;k++){
            var curFilterValue = filterObj[curKey][k];
            if(curElement[curKey].match(curFilterValue)){
              //We found a match keep this element and move on to checking the next one by breaking out of the inner loops that are checking particular keys/values
              newArray.push(curElement);
              break innerLoops;
            }
          }
        }
      }
      return newArray;
    };
  })
  ;

通过动态过滤器 - AngularJS过滤数组中的对象

2 个答案: