Filter out second drop-down based on first selection.

Question

I want the second dropdown not to contain the first selection. If i select "Team1" in first dropdown, the second one should not contain "Team1" and to contain the other ones. The same to happen vice-versa too.

<div ng-app>
    <div ng-controller="TodoCtrl">
    <select ng-model="name" ng-options="f.name for f in devices"></select>
    <select ng-model="name" ng-options="f.name for f in devices 
               | filter:{id:name.id }" id="{{formEach.id}}">
        </select>
    </div>
</div>

Below is a fiddle which address the problem http://jsfiddle.net/x40ese02/

Answer 1

Change your filter to filter:{id:'!' + name.id} filter:{id:'!' + name.id} .

 function TodoCtrl($scope) { $scope.devices = [{ id: "X000", name: 'Team 1', icon: 'ion-document-text', status: 'Owner', color: 'brown' }, { id: "X002", name: 'Team 2', icon: 'ion-document-text', status: 'Owner', color: 'yellow' }, { id: "X003", name: 'Team 3', icon: 'ion-document-text', status: 'Owner', color: 'black' }]; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div ng-controller="TodoCtrl"> <select ng-model="name" ng-options="f.name for f in devices"></select> <select ng-model="name2" ng-options="f.name for f in devices | filter:{id: '!' + name.id }" id="{{formEach.id}}"> </select> </div> </div>