javascript - 过滤 ng-options 时，如何取消选择所有过滤掉的选项？

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 为空。那么我如何才能访问范围模型呢？

Answer 1

如果我理解您想要实现的目标，您希望能够获得过滤掉不适用的广告系列后存在的所有广告系列的数组吗？

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

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

然后，您就可以在范围属性 filteredCampaigns 中获得已过滤的数组。

这里尝试用实际行动来证明这一点。我对您如何尝试执行此操作做了一些假设，因为您没有提及您的 Controller 或 View 代码。

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>