通过ng-repeat角度多重过滤器

我有具有各种属性的对象列表。以及我应该用作过滤器的对象列表。通过ng-repeat角度多重过滤器

$scope.filters = [ 
    { title: "title1", options: [ 
     { text: "all", tags: ["1","2","3"] }, 
     { text: "1", tags: ["1"] }, 
     { text: "2", tags: ["2"] }, 
     { text: "3", tags: ["3"] } 
     ] 
    }, 
    { title: "title2", options: [ 
     { text: "all", tags: ["a","b","c"] }, 
     { text: "a", tags: ["a"] }, 
     { text: "b", tags: ["b"] }, 
     { text: "c", tags: ["c"] } 
     ] 
    }] 
$scope.products = [ 
    { name: "foo", tags: ["1", "a","main"] }, 
    { name: "bar", tags: ["2", "b", "second"] }, 
    { name: "baz", tags: ["1", "c", "second"] }, 
    { name: "tap", tags: ["3", "c", "main"] } 
    ]

我显示过滤器作为选择元素。

<div ng-repeat="filter in filters"> 
      <label for="filter">{{::filter.title}}</label> 
      <select name="filter" ng-options="choice as choice.text for choice in filter.options track by choise.tags"></select> 
     </div>

但是，如何在这里使用过滤器？ http://plnkr.co/edit/S18xKkXPieWEBvMD3FqJ?p=preview

要在主控制器可以选择的选项，我可以写ng-model="$parent.selectedOption"但将rewrited是否有任何其他选择发生变化，我不知道是一个正确的事情篡改父范围，像这样。

编辑：

我想用一组滤波器（通过选择所定义的）来过滤产品。

例如：

select1 = "2" 
select2 = "b"

然后过滤产品应该只包含那些tags属性包括从选择

来源

2016-02-29 mef_

能否请您详细阐述自己对什么期望的结果您正在寻找出来？ – Shashank

@Shashank，我想将所有过滤器（选择的值）应用于产品列表。 –

所以当你从'title1'中选择一些东西时，productList应该显示一些东西，它也应该触发'select'的每一个变化。那是对的吗？ – Shashank

值我已经更新了plnkr基于在下拉选择的值，以显示产品。为了达到这个目的，我也对js变量做了一些改变。但它应该给你一个实现这个想法。希望能帮助到你。 http://plnkr.co/edit/i0edlLRkIpmgW3fNyKsN?p=preview

// Code goes here 
 
    var app = angular.module("myApp", []); 
 
    
 
    
 
    app.controller("MainCtrl", function ($scope) { 
 
     $scope.filters = [ 
 
     { title: "type", filterBy: "all", options: [ 
 
      { text: "all", tags: ["1","2","3"] }, 
 
      { text: "1", tags: ["1"] }, 
 
      { text: "2", tags: ["2"] }, 
 
      { text: "3", tags: ["3"] } 
 
      ] 
 
     }, 
 
     { title: "condition", filterBy: "all", options: [ 
 
      { text: "all", tags: ["a","b","c"] }, 
 
      { text: "a", tags: ["a"] }, 
 
      { text: "b", tags: ["b"] }, 
 
      { text: "c", tags: ["c"] } 
 
      ] 
 
     }, 
 
     { title: "group", filterBy: "all", options: [ 
 
      { text: "all", tags: ["main","second"] }, 
 
      { text: "main", tags: ["main"] }, 
 
      { text: "second", tags: ["second"] } 
 
      ] 
 
     } 
 
     ]; 
 
     
 
     $scope.products = [ 
 
     { name: "foo", type: "1", condition: "a", group: "main"}, 
 
     { name: "bar", type: "2", condition: "b", group: "second"}, 
 
     { name: "baz", type: "1", condition: "c", group: "second"}, 
 
     { name: "tap", type: "3", condition: "c", group: "main"} 
 
     ]; 
 
     
 
     $scope.filterProduct = function(product) { 
 
     var isValid = true; 
 
     angular.forEach($scope.filters, function(filter){ 
 
      if(!(filter.filterBy === "all" || filter.filterBy === product[filter.title])) { 
 
      isValid = false; 
 
      } 
 
     }); 
 
     
 
     return isValid; 
 
     
 
     } 
 
     
 
    });

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
    </head> 
 

 
    <body ng-app="myApp"> 
 
    <div ng-controller="MainCtrl"> 
 
     <div> 
 
     <h2>filters: </h2> 
 
     <div ng-repeat="filter in filters"> 
 
      <label for="filter">{{filter.title}}</label> 
 
      <select name="filter" ng-model="filter.filterBy"> 
 
      <option ng-repeat="option in filter.options" value="{{option.text}}">{{option.text}}</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
     <div> 
 
     <h2>data: </h2> 
 
     <ul ng-repeat="product in products | filter:filterProduct"> 
 
      <li>{{::product.name}}</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

来源

2016-02-29 12:31:24

几乎完全是我在找的东西。然而，需求有所改变，所以根据这里的问题对滤波器算法做了一些修改http://stackoverflow.com/questions/16312528/check-if-an-array-contains-any-elements-in-another - 阵列式的JavaScript。我需要比较包含目标数组内的数组的任何元素。 –

通过ng-repeat角度多重过滤器

回答

相关问题