自定义过滤器，用于从 AngularJS 1.x 中的另一个 select 框中删除 selected 选项

Question

我有以下两个 select 盒子；

<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"}
]

我需要一个执行以下操作的自定义过滤器。如果我 select 任何选项在主要通信 select 框中说移动 Phone 我希望从辅助通信 select 框中删除该选项。反之亦然。

我尝试了 link 中给出的解决方案，但它对我不起作用。此外，他们还没有给出自定义过滤器解决方案。请帮我解决这个问题。

Answer 1

将此过滤器添加到您的应用程序

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>

Answer 2

创建自定义过滤器并在第二个 select 框中调用它

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>

自定义过滤器，用于从 AngularJS 1.x 中的另一个 select 框中删除 selected 选项

Custom filter to remove selected option in one select box from another in AngularJS 1.x

javascript

angularjs

angularjs-1.6