How to dynamically change values in drop down using other drop down change using angular?

Question

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.

Why don't you accept the solution ?

Sampath
– Sampath

2014-11-06 10:54:08 +00:00
Commented Nov 6, 2014 at 10:54 — Sampath
– Sampath, Commented Nov 6, 2014 at 10:54

Brocco · Accepted Answer · 2014-04-05 00:59:58Z

4

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

edited Apr 5, 2014 at 0:59

answered Apr 5, 2014 at 0:17

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Cashatt · Accepted Answer · 2014-04-04 23:09:21Z

0

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.

answered Apr 4, 2014 at 23:09

Matt Cashatt

24.3k29 gold badges83 silver badges115 bronze badges

1 Comment

Brocco Over a year ago

I would avoid using a watch within your controller, and instead use ng-change to call back into the controller. Explanation: benlesh.com/2013/08/angularjs-watch-digest-and-apply-oh-my.html

Collectives™ on Stack Overflow

How to dynamically change values in drop down using other drop down change using angular?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related