筛选ng选项时，如何取消选择所有筛选出的选项

Question

我有一个多个活动选择，当我选择一个新客户时，我希望活动的范围是选定的客户。

筛选器按预期工作，但是，campaigns的ng-model可能包含使用筛选器隐藏的活动。

我希望所有过滤掉的活动选项在不再处于选择中时都被取消选择。

这是我的过滤器：

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上有一个筛选器对象，在筛选活动时需要更新它。

$scope.filter["campaign.id"] = [1,2,3]

选择客户端后，我想从$scope.filter["campaign.id"]中删除所有不属于该客户端的活动ID。

当我将作用域传递给过滤器时，$scope.filter为null。那么，我怎样才能访问范围模型呢？

Answer 1

如果我了解您想要实现的目标，您是否希望能够获得在过滤掉不适用的活动后存在的所有活动的数组？

如果是这样的话，你可以这样宣布你的竞选选择：

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

然后，您就可以在作用域属性filteredCampaigns中显示过滤后的数组。

以下是一个在行动中证明这一点的尝试。我对你是如何做到这一点做了一些假设，因为你没有提到你的控制器或视图代码。

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;
    }
  }
});

<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>