javascript - 自定义过滤器，用于从 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>

它采用相同的对象数组作为值；

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>