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

【问题标题】：How to show default option in select option (drop down box) in an ng-repeat of rows?如何在 ng-repeat 行的选择选项（下拉框）中显示默认选项？
【发布时间】：2021-02-10 17:42:11
【问题描述】：

我有一个使用 ng-repeat 显示的名称和活动列表，其中显示了表格数据（为简洁而缩短）。列表框会填充，如果您更改下拉列表中的选择，我可以显示之前存储的 SchoolDayID 和更新的值。当表单加载时，它不会在下拉列表中选择任何值。对于 ng-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>

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案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>

【讨论】：