Question

我有各种属性的对象列表。以及我应该用作过滤器的对象列表。

<link href="{{ asset('bundles/acmedemo/css/contact.css') }}" rel="stylesheet" />

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

  $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"] }
  ]

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

要使主控制器中的选定选项可用，我可以编写<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>，但如果更改了任何其他选项，它将被重写，并且我不确定是否正确篡改父范围。

编辑：

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

例如：

ng-model="$parent.selectedOption"

然后，过滤后的产品应仅包含select1 = "2" select2 = "b"属性包含来自选择

的值的那些产品

Answer 1

我已更新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="angularjs@1.4.8" 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>

通过ng-repeat进行角度多重滤波

1 个答案: