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

Question

I'm having the following two select boxes;

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

Which takes the same array of objects as 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"}
]

I need a custom filter which performs the following. If I select any option say Mobile Phone in primary communication select box I want that option to be removed from secondary communication select box. Similarly vice versa.

I tried the solution given in this link, but it's not working for me. Also, they have not given a custom filter solution. Kindly help me with this.

Youness HARDI · Answer 1 · 2017-08-02T14:28:57.310

add this filter to your application

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

and in the html use this code

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

It's giving me the following error: `angular.js:14525 Error: [$parse:syntax] Syntax Error: Token '.' is unexpected, expecting [}] at column 57 of the expression [addCareAdminController.communicationTypes | filter:{type.code: '!' + addCareAdminController.careAdminModel.secondaryCommunication}] starting at [.code: '!' + addCareAdminController.careAdminModel.secondaryCommunication}].` — karthi, Aug 02 '17 at 14:02

Sachila Ranawaka · Accepted Answer · 2017-08-02T14:12:41.193

create a custom filter and call it in the second select box

data-ng-options="type.code as type.description for type in arr = (communicationTypes | custFile : primaryCommunication)">

Demo

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>

From primary communication to secondary its working fine but the opposite is not working. — karthi, Aug 02 '17 at 14:11

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

2 Answers2