动态创建多个下拉列表并自动设置angularjs中的每个下拉列表

时间:2015-07-01 00:53:55

标签: angularjs angularjs-ng-model angularjs-ng-options

我能够根据angularJS中的相同 数据集动态创建多个下拉列表。但是,我在尝试动态设置每个下拉列表的默认值时遇到问题。例如,在我的第一个下拉列表中,我希望默认选择第一个主题(“写入”)。然后我希望第二个下拉列表选择第二个主题(“阅读”),第三个下拉列表选择第三个主题(“数学”),依此类推。回顾一下,我的每个下拉列表都有相同的选项,但它应该动态分配给不同的模型。 您能否告诉我如何动态设置具有相同选项的每个动态生成的下拉列表的默认值?

请参阅http://plnkr.co/edit/dmQFLP?p=preview中的代码。

提前感谢您的帮助!

这是我的控制器代码:     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'},];
    }
  }
}]);

1 个答案:

答案 0 :(得分:2)

尝试在ng-init="subjectSelected[$index] = subjects[$index].value"标记中添加select以初始化值。

<强> 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>

希望它有所帮助。