我有以下两个选择框;
<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"}
]
我需要一个执行以下操作的自定义过滤器。如果我在主要通信中选择任何选项,例如移动电话,我希望从辅助通信选择框中删除该选项。反之亦然。
我尝试了此链接中给出的解决方案,但它对我不起作用。此外,他们没有提供定制的过滤器解决方案。请帮我解决这个问题。
创建自定义过滤器并在第二个选择框中调用它
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>
将此过滤器添加到您的应用程序中
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>