如何在 ng-repeat 行中显示 select 选项（下拉框）中的默认选项？

Question

我有一个用 ng-repeat 显示的名称和活动列表，它显示表格数据（为简洁起见缩短）。列表框会填充，如果您更改下拉列表中的 selection，我可以显示之前存储的 SchoolDayID 以及此更新的值。加载表单时，它不会 select 下拉列表中的任何值。对于 ng-select 我尝试了几种变体，其中 none 有效。我花了几天时间，不知道我做错了什么或不明白。我如何让每行的每个下拉菜单 select 正确的项目？

我试过：

<select ng-model="selectedSchoolDayID" ng-init="selectedSchoolDayID = a.SchoolDayID" ng-options="x.ID as x.code for x in AMListData" >
</select>

甚至：

<select class="form-group">
   <option id="selectedSchoolDay" name="selectedSchoolDay" value="{{AMListData[0].ID}}" selected="{{AMListData[0].ID}} == {{a.SchoolDayID}}">{{AMListData[0].code}}</option>
   <option id="selectedSchoolDay" name="selectedSchoolDay" value="{{AMListData[1].ID}}" selected="{{AMListData[1].ID}} == {{a.SchoolDayID}}">{{AMListData[1].code}}</option>
   <option id="selectedSchoolDay" name="selectedSchoolDay" value="{{AMListData[2].ID}}" selected="{{AMListData[2].ID}} == {{a.SchoolDayID}}">{{AMListData[2].code}}</option>
</select>

列表框的数据：


$scope.AMListData = participationSvc.amlist();

// from participationSvc:
'amlist': function listSelectionsController($scope) {
            return [
                { ID: '0', code: 'PM Programming' },
                { ID: '1', code: 'AM Programming' },
                { ID: '2', code: 'Supplemental'   }
            ];
        },

HTML/AngularJS部分：

<div ng-repeat="a in selectedAttendees | orderBy : a.LastName">

<!-- there could be many rows, once per name of person. each row should have a drop-down of its own -->

    <div class="row">
        <div>{{a.LastName}}</div>
        ...
        <select class="col-md-5" id="SchoolDay" name="SchoolDay" ng-model="a.SchoolDayID">
            <option data-ng-repeat="x in AMListData" name="SchoolDay" value={{x.ID}} ng-selected="{{(x.ID == selectedSchoolDay) ? true: false}}" >{{x.code}}</option>
        </select>

         <!-- Show me current selection and drop-down list data -->
        <b> &nbsp; Selected ID:  {{a.SchoolDayID}}</b>
        <br />
        <ul>
        <li ng-repeat="x in AMListData">{{x.ID}}   {{x.code}}</li>
        </ul>
    </div>
</div>

Answer 1

您可以在控制器中使用默认值

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedSchoolDayID"  ng-options="x.ID as x.code for x in AMListData" >
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.a={
    //SchoolDayID:'2'
  };

  $scope.selectedSchoolDayID=$scope.a.SchoolDayID || '1';//'1' is Default Value
    
  $scope.AMListData=[
    { ID: '0', code: 'PM Programming' },
    { ID: '1', code: 'AM Programming' },
    { ID: '2', code: 'Supplemental'   }
  ];
   
});
</script>

</body>
</html>

如何在 ng-repeat 行中显示 select 选项（下拉框）中的默认选项？

How to show default option in select option (drop down box) in an ng-repeat of rows?

angularjs

angularjs-ng-repeat