在angularjs中过滤的多个内容

时间:2015-11-27 11:20:40

标签: angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

HTML

<label>Store Category</label>
<label class="checkbox-inline">
   <input type="checkbox" ng-model="campaign.store_category1" ng-checked="true" ng-true-value="'A'"> A 
</label>
<label class="checkbox-inline">
   <input type="checkbox" ng-model="campaign.store_category2" ng-true-value="'B'"> B
</label>

过滤

<tr ng-repeat="store in storeList | filter : {store_category:campaign.store_category1 || campaign.store_category2}">

这里我可以从商店列表中过滤商店。但在这里它只展示了一类商店。当两个商店被选中时,我需要从storeList显示两个商店。

1 个答案:

答案 0 :(得分:0)

您可以将自定义功能传递给filter,如此(请参阅myFilterFunction

<强> HTML

<div ng-app="myApp">
    <div ng-controller="ctrlr">
        <label>Store Category</label>
        <label class="checkbox-inline">
            <input type="checkbox" ng-model="campaign.store_category1" ng-true-value="'A'"> A
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" ng-model="campaign.store_category2" ng-true-value="'B'"> B
        </label>

        <div ng-repeat="store in storeList | filter : myFilterFunction ">{{ store.name }}</div>
    </div>
</div>

<强>脚本

angular.module('myApp', [])
    .controller('ctrlr', function ($scope) {
        $scope.storeList = [
            { name: 'A1', store_category: 'A' },
            { name: 'A2', store_category: 'A' },
            { name: 'B1', store_category: 'B' },
            { name: 'B2', store_category: 'B' },
        ]

        $scope.campaign = {
            store_category1: 'A'
        }

        $scope.myFilterFunction = function (store) {
            return [$scope.campaign.store_category1, $scope.campaign.store_category2].indexOf(store.store_category) !== -1;
        }
    });