过滤ng-options时,如何取消选择所有已过滤的选项?

时间:2014-09-22 14:12:12

标签: javascript angularjs

我有多个广告系列,当我选择新客户时,我希望将广告系列限定为所选客户。

过滤器按预期工作,但ng-model的{​​{1}}可能包含过滤器隐藏的广告系列。

我希望当所有广告系列选项不再出现在选择中时,将取消选中所有已过滤的广告系列选项。

这是我的过滤器:

campaigns

更新

我在$ scope上有一个过滤器对象,我需要在过滤广告系列时更新。

angular.module('MyApp')
  .filter('campaignFilter', function(){
    return function(options, client_ids, $scope) {
      if (client_ids == null) {
        return options;
      } else {
        filtered = [];

        angular.forEach(options, function(option){
          if (client_ids.indexOf(option.client_id) > -1) {
            filtered.push(option);
          } else {
            idx = $scope.filter["campaign.id"].indexOf(option.client_id);
            if idx > -1 {
              $scope.filter["campaign.id"].splice(idx, 1);
            };
          };
        });

        return filtered;
      }
    }
  });

选择客户后,我想从$scope.filter["campaign.id"] = [1,2,3] 删除所有不属于该客户的广告系列ID。

当我将范围传递给过滤器时,$scope.filter["campaign.id"]为空。那么我怎样才能访问范围模型?

1 个答案:

答案 0 :(得分:1)

如果我了解您要实现的目标,您希望能够在过滤掉不适用的广告系列之后获得所有广告系列的数组吗?

如果是这样,您可以声明您选择的广告系列如下:

<select ng-model="selectedCampaign" ng-options="campaign.name for campaign in filteredCampaigns = (campaigns | campaignFilter: clientIds)"></select>

然后,您可以在范围属性filteredCampaigns中使用已过滤的数组。

这是试图证明这一点。我对你如何做到这一点做了一些假设,因为你没有提到你的控制器或查看代码。

&#13;
&#13;
var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {

  $scope.filter = {
    'campaign.id': []
  } 

  $scope.campaigns = [{
    client_id: 1,
    id: 1,
    name: 'campaign 1'
  }, {
    client_id: 1,
    id: 2,
    name: 'campaign 2'
  }, {
    client_id: 1,
    id: 3,
    name: 'campaign 3'
  }, {
    client_id: 2,
    id: 4,
    name: 'campaign 4'
  }, {
    client_id: 2,
    id: 5,
    name: 'campaign 5'
  }, {
    client_id: 3,
    id: 6,
    name: 'campaign 6'
  }, ];
  
  
$scope.clientIds = [1];

$scope.$watch('filteredCampaigns', function(val) {
     $scope.filter['campaign.id'] = val.map(function(item) { return item.id });
  });
})


.filter('campaignFilter', function() {
  return function(options, client_ids) {
    if (client_ids == null) {
      return options;
    } else {
      filtered = [];

      angular.forEach(options, function(option) {
        if (client_ids.indexOf(option.client_id) > -1) {
          filtered.push(option);
        };
      });

      return filtered;
    }
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

 <div ng-controller="MainCtrl" ng-app="app">
    <label>
      Campaign
      <select ng-model="selectedCampaign" ng-options="campaign.name for campaign in filteredCampaigns = (campaigns | campaignFilter: clientIds)"></select>
  </label>
  <br><br>
  Client id: <input ng-model="clientIds" size="2" >
  
  <p><pre>filter['campaign.id']: {{ filter['campaign.id']}}</pre></p>
    
</div>
&#13;
&#13;
&#13;