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