Question

我正在使用ng-repeat生成多个下拉列表。但是在存储值之后，它不会像之前选择的那样选择下拉值。在此示例中，它应自动将teacher1，teacher3和teacher5显示为选定值。

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="(i,teacherList) in Trip.teachers track by $index">
        {{Trip.teachers[$index].id}}
        <select m-required="true" ng-model="Trip.teachers[$index].id" class="teacher form-control" >
            <option value="">Select Teacher</option>
            <option ng-repeat="teacher in teachers" value="{{teacher.id}}">{{teacher.name}}</option>
        </select>
    </div>
    <button ng-click="addTeacher();">Add Teacher</button>                      
    <button ng-click="removeTeacher();" style="display:none;" class="removeTeacher">Remove</button>
</div>

和我的角度代码如下：

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {  
    $scope.Trip={
        teachers : [
            {"name":"teacher1","id":"1"},
            {"name":"teacher3","id":"3"},
            {"name":"teacher5","id":"5"}
        ]
    };
    $scope.teachers=[
        {id:"1","name":"teacher1"},
        {id:"2","name":"teacher2"},
        {id:"3","name":"teacher3"},
        {id:"4","name":"teacher4"},
        {id:"5","name":"teacher5"},
        {id:"6","name":"teacher6"}
    ];
    $scope.addTeacher=function(){
        $scope.Trip.teachers.push({"name":"","id":""});
        document.getElementsByClassName("removeTeacher")[0].style.display="block";      
    }
    $scope.removeTeacher=function(){
        $scope.Trip.teachers.pop();     
        if($scope.Trip.teachers.length==1){
            document.getElementsByClassName("removeTeacher")[0].style.display="none";
        }
    }
})

以下是JSFiddle的链接： http://jsfiddle.net/dipgupta1986/10z7mda2/10/

Answer 1

您似乎想要显示预先选择的默认值，您可以使用ng-options和ng-model来设置默认值，方法是重写select，如下所示：

<select m-required="true" ng-model="Trip.teachers[$index]" 
ng-options="option.name for option in teachers track by option.id" >

Demo

ng-Options Documentation

ng-model不从下拉列表中选择由ng-repeat生成的值

1 个答案: