筛选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.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> 

然后你有过滤数组中的scope属性filteredCampaigns aviable。

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

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>