Question

我有一份产品清单。每个产品都有三个属性：mustBuy，promotion（booleans）和productName。我尝试做的是根据用户输入在当时应用一个过滤器。如果用户点击名为＆＃34; Must buy＆＃34;的按钮，产品将被mustBuy字段过滤，所以一旦我点击该按钮，我应该只看到具有值为true的mustBuy属性的产品。我想以动态方式生成这些过滤器按钮，因为我可能会在以后添加额外的属性。现在我有一个用于过滤的硬编码按钮列表：

        <a ng-click="myFilter = {mustBuy:true}">
            <img src="/images/must-filter.png" />
        </a>
        <a ng-click="myFilter = {promotion:true}">
            <img src="/images/promo-filter.png" />
        </a>

这就是＆＃34; myFilter＆＃34;过滤器。

<div ng-repeat="product in products | filter:myFilter">...</div>

它工作正常，但我想让这些过滤器动态，因为我将来会添加更多。这就是我尝试过的：（V1）： Js控制器：

        $scope.filters = [{ image: "must-filter.png", myFilter: { mustBuy: true } }, { image: "promo-filter.png", myFilter: { promotion: true } }];

HTML：

        <a ng-repeat="f in filters | filter:f.myFilter">
            <img src="/images/{{f.image}}" />
        </a>

（V2）： Js控制器：

        $scope.filters = [{ image: "must-filter.png", myFilter: { mustBuy:true } }, { image: "promo-filter.png",  myFilter: {promotion:true} }];

HTML：

        <a ng-repeat="f in filters"
           ng-click="{{f.myFilter}}">
            <img src="/images/{{f.image}}" />
        </a>

（V3）：

Js控制器：

       $scope.filters = [{ image: "must-filter.png", myFilter: "myFilter = {mustBuy:true}" }, { image: "promo-filter.png",  myFilter: "myFilter = {promotion:true}" }];

HTML：

        <a ng-repeat="f in filters"
           ng-click="{{f.myFilter}}">
            <img src="/images/{{f.image}}" />
        </a>

第三种方法（v3）与原始（硬编码）方法完全相同的HTML输出，除了它不起作用，这让我觉得幕后发生了更多（绑定）的事情？如何实现第一段中描述的功能？

Answer 1

如果没有太多考虑（完全阅读），为什么你的尝试失败了，你可以达到你想要的效果：

<强> 1）。
在控制器中定义过滤器列表和当前选定的（应用的）过滤器：

$scope.filters = [
    {name: 'none',      filterExpr: ''},
    {name: 'must buy',  filterExpr: {mustBuy: true}},
    {name: 'promotion', filterExpr: {promotion: true}}
];
$scope.selectedFilter = $scope.filters[0];

_{（我的过滤器对象有name和filterExpr，但您可以根据需要进行调整。）}

<强> 2）。
定义一个用于更改应用过滤器的功能（当然也在控制器中）：

$scope.setFilter = function (filter) {
    $scope.selectedFilter = filter;
};

第3。）
让用户更改应用的过滤器（在视图中）：

<ul> <li ng-repeat="filter in filters"> <a href="" ng-click="setFilter(filter)">{{filter.name}}</a> </li> </ul>

<强> 4）。
根据当前所选过滤器的filter-expression：
过滤项目
<ul> <li ng-repeat="item in items | filter:selectedFilter.filterExpr"> {{item.description}} </li> </ul>

另请参阅此 short demo 。

Answer 2

正如您在 FIDDLE 中看到的那样，您必须使用功能或自定义过滤器来链接动态过滤器。

过滤器集：

//this set will filter everything but true-false
$scope.set1 = [function(item){return item.mustBuy;},
               function(item){return !item.promotion}];

过滤功能：

$scope.multipleFilters = function(item){
    var v = true;
    for(var i=0; i<$scope.set1.length; i++){
        v = v && $scope.set1[i](item);
    }
    return v;
};

像这样使用：

<div ng-repeat="product in products | filter:multipleFilters">
    {{product.mustBuy}} - {{product.promotion}}
</div>

关键是使用function(item){return item.mustBuy}等过滤器的函数，而不是像{mustBuy:true}

这样的表达式

AngularJS动态过滤器列表

2 个答案: