自定義過濾器從AngularJS 1.x中的另一個選擇框中刪除選定的選項

Question

我有以下兩個選擇框;

<select name="primary_communication" id="primary_communication" class="form-control" 
data-ng-model="addCareAdminController.careAdminModel.primaryCommunication" 
data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes"> 
    <option value="">Select Primary Communication</option>              
</select> 

<select name="secondary_communication" id="secondary_communication" class="form-control" 
data-ng-model="addCareAdminController.careAdminModel.secondaryCommunication" 
data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes"> 
    <option value="">Select Secondary Communication</option>              
</select> 

它採用與value相同的對象數組;

self.communicationTypes = [ 
{code: "CMPH", groupCode: "COMM-METH", description: "Mobile Phone"} 
{code: "CWPH", groupCode: "COMM-METH", description: "Work Phone"} 
{code: "CPNO", groupCode: "COMM-METH", description: "Pager Number"} 
{code: "CEMA", groupCode: "COMM-METH", description: "Email"} 
] 

我需要一個自定義過濾器執行以下操作。如果我在主通信選擇框中選擇任何選項說移動電話，我希望從輔助通信選擇框中刪除該選項。反之亦然。

我試過了這個link給出的解決方案，但它不適合我。此外，他們還沒有給出自定義過濾器解決方案。請幫助我。

Answer 1

創建自定義過濾器，並調用它在第二個選擇框

data-ng-options="type.code as type.description for type in arr = (communicationTypes | custFile : primaryCommunication)"> 

演示

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.communicationTypes = [ 
 
    {code: "CMPH", groupCode: "COMM-METH", description: "Mobile Phone"}, 
 
    {code: "CWPH", groupCode: "COMM-METH", description: "Work Phone"}, 
 
    {code: "CPNO", groupCode: "COMM-METH", description: "Pager Number"}, 
 
    {code: "CEMA", groupCode: "COMM-METH", description: "Email"} 
 
] 
 
}) 
 

 
.filter('custFile',function(){ 
 
    return function(item,code){ 
 
    
 
    if(code){ 
 
     var arr = []; 
 
     for(var i=0; i<=item.length-1; i++){ 
 
     if(item[i].code !== code){ 
 
      arr.push(item[i]) 
 
     } 
 
     } 
 
    } else return item; 
 

 
    return arr 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<select name="primary_communication" id="primary_communication" class="form-control" 
 
data-ng-model="primaryCommunication" 
 
data-ng-options="type.code as type.description for type in arr = (communicationTypes | custFile : secondaryCommunication)"> 
 
    <option value="">Select Primary Communication</option>              
 
</select> 
 
<select name="secondary_communication" id="secondary_communication" class="form-control" 
 
data-ng-model="secondaryCommunication" 
 
data-ng-options="type.code as type.description for type in arr = (communicationTypes | custFile : primaryCommunication)"> 
 
    <option value="">Select Secondary Communication</option>              
 
</select> 
 
</div>

Answer 2

這個過濾器添加到您的應用程序

app.filter('filterList', function() { 
    return function (items, notInList) { 
    var filtered = []; 
    for (var i = 0; i < items.length; i++) { 
     if(items[i].code !== notInList) { 
     filtered.push(items[i]); 
     } 
    } 
    return filtered; 
    }; 
}); 

，並在HTML中使用此代碼

<select name="primary_communication" id="primary_communication" class="form-control" 
    data-ng-model="addCareAdminController.careAdminModel.primaryCommunication" 
    data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes | filterList:addCareAdminController.careAdminModel.secondaryCommunication"> 
     <option value="">Select Primary Communication</option>              
</select> 

<select name="secondary_communication" id="secondary_communication" class="form-control" 
    data-ng-model="addCareAdminController.careAdminModel.secondaryCommunication" 
    data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes | filterList:addCareAdminController.careAdminModel.primaryCommunication"> 
     <option value="">Select Secondary Communication</option>              
</select>