代码之家 › 专栏 › 技术社区 › karthi

自定义过滤器,将AngularJS 1.x中一个选择框中的选定选项从另一个选择框中删除

angularjs-1.6 angularjs javascript

karthi · 技术社区 · 7 年前

我有以下两个选择框;

<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 ,但这对我不起作用。此外,他们还没有提供定制的过滤器解决方案。请帮我做这个。

2 回复 | 直到 7 年前

Sachila Ranawaka 7 年前

创建一个自定义过滤器,并在第二个选择框中调用它

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>

Youness HARDI 7 年前

将此筛选器添加到应用程序

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;
  };
});

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