I have five dropdowns. All five dropdowns have same source for options. An option selected in one dropdown should not appear in options of remaining dropdowns. What is best way to achieve it in angularjs?
And source for ng-options is array of objects.
You'll need to come up with an implementation that suits your specific needs and desired user experience, but this may help you work out some basic principles you can use. This is just the most minimal example I could think of. The main point is the custom filter that you'll filter ng-options down with. It will receive your array of objects (the options), and you'll also pass in the other models so that you can filter them out if they're selected.
Here, I'm looping over each selected object and removing it from the ng-options array, unless it's the object selected on this element.
angular.module('myApp', [])
.filter('customFilter', function(filterFilter) {
return function(input, filterEach, exclude) {
filterEach.forEach(function(item) {
if (angular.equals(item, exclude)) { return; }
input = filterFilter(input, '!'+item);
});
return input;
};
});<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.4.0/lodash.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<div ng-app="myApp" ng-init="foos = [{label:'label 1',id:1},{label:'label 2',id:2},{label:'label 3',id:3}]; selected = []">
<div ng-repeat="foo in foos">
<select ng-model="selected[$index]" ng-options="obj.id as obj.label for obj in foos | customFilter:selected:selected[$index]"></select>
</div>
</div>