Reputation: 101
I have two drop downs. Initially both has values like "First","Second","Third",... When 1st dropdown has value "First" the second should not offer a value "First" that is second should have other than what is selected from 1st one. I want to do this using angularjs. Values in 2nd dropdown should be changed dynamically.
<select class="form-control" ng-model="Data.firstType">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
<select class="form-control" ng-model="Data.SecondType">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
Can anyone help on this?
Thanks in advance.
Upvotes: 1
Views: 5546
Reputation: 65053
If you're items in the drop downs are static you can do this fiddle
ng-if="Data.FirstType !== First"
If they are dynamic then you can filter the items in the second list based upon the item selected in the first drop down
Here is a fiddle to dynamically filter the second list if the lists are being populated dynamically.
function MyCtrl($scope){
$scope.Data = {};
$scope.items = [{id:1, name:'First'}, {id:2, name:'Second'}, {id:3, name:'Third'}];
$scope.exclude = function(x){
return x !== $scope.Data.firstType;
}
}
Upvotes: 4
Reputation: 24238
Just use a $watch:
$scope.$watch('Data.firstType', function(val) {
//Get index of type in Data.yourArrayData
var idx = $scope.Data.yourArrayData.indexOf(val);
$scope.Data.yourArrayData.splice(idx, 1);
});
This assumes you are binding your second select to yourArrayData
using an ng-repeat. I haven't tested this code, but it should be what you need.
Upvotes: 0