Dynamically creating multiple dropdown and auto setting each dropdown in angularjs

Question

I was able to dynamically creating multiple drop-down lists base on the same set of data in angularJS. However, I am having an issue trying to dynamically set the default value of each of the drop-down lists. For example, in my first drop-down list, I would like the first subject ("Writing") to be selected by default. Then I would like the second drop-down list to have the second subject ("Reading") to be selected and the third drop-down list to have the third subject ("Math") to be selected and so forth. To recap, each of my drop-down list has the same options, but it should be assigned to different model dynamically. Can you please tell me how I can dynamically set the default value of each of the dynamically generated drop-down lists that has the same options?

Please see the code in http://plnkr.co/edit/dmQFLP?p=preview.

Thank you in advance for your help!

Here is my controller code: var module = angular.module("myapp",[]);

module.controller('myCtrl',['$scope','myService', function ($scope,myService) {

$scope.subjects = myService.getSubjects();    
$scope.subjectSelected=[]
}])

module.factory('myService', [function () {
  return {
    getSubjects: function() {      
          return [ 
              { name: 'Writing', value: 'Writing'}, 
              { name: 'Reading', value: 'Reading'}, 
              { name: 'Math', value: 'Math'},
              { name: 'Art', value: 'Art'},
              { name: 'Social Studies', value: 'SocialStudies'},];
    }
  }
}]);

you can also use ng-selected for auto select the options dynamically — Pardeep Jain
– Pardeep Jain, Commented Jan 29, 2016 at 17:10

Alberto I.N.J. · Accepted Answer · 2015-07-01 01:13:24Z

2

Try to add ng-init="subjectSelected[$index] = subjects[$index].value" in the select tag to initialize the value.

E.g.

<div ng-repeat ="subject in subjects">
    <select class="form-control input-lg" 
            ng-init="subjectSelected[$index] = subjects[$index].value" 
            ng-model="subjectSelected[$index]"
            required="required" 
            ng-options="subject.value as subject.name for subject in subjects">
    </select> 
</div>

Hope it helps.

edited Jul 1, 2015 at 1:13

answered Jul 1, 2015 at 1:04

Alberto I.N.J.

1,85315 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Dynamically creating multiple dropdown and auto setting each dropdown in angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related