自定义过滤器从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>