angularjs - 在angularjs中动态创建多个下拉菜单并自动设置每个下拉菜单

Question

我能够根据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'},];
    }
  }
}]);

Answer 1

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

例如

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

希望能帮助到你。