AngularJS - 使用选择/选项嵌套 ng-repeat，获取/设置所选值

Question

我正在尝试设置两个 ng-repeat 循环，其中一个嵌套循环是一个选择/选项下拉菜单。我检查了其他类似的帖子，但仍然不确定如何在 HTML 中定义 ng-model 以获取/设置选择框中的默认值/选项。

    <table>
      <tr ng-repeat="student in studentList">
        <td>{{student.name}}</td>
        <td>
          <select ng-model="courseSelected">
            <option ng-repeat="course in courseList" value="{{course.id}}">{{course.name}}</option>
          </select>
        </td>
      </tr>
   </table>

studentList 和 courseList 都来自数据库表，student 表/对象有一个 courseId 列/引用。换句话说，默认选择的课程和更改的课程选项（如果发生这种情况）将具有它们背后的逻辑：student.courseId = course.id

感谢任何帮助。

Answer 1

var editer = angular.module('app', []);

function myCtrl($scope) {

  $scope.studentList = [{
    id: 1,
    name: 'Jack'
  }, {
    id: 2,
    name: 'Terry'
  }, {
    id: 3,
    name: 'Rosa'
  }, {
    id: 4,
    name: 'Holt'
  }];
  $scope.courseList = [{
    id: 1,
    name: 'Course1'
  }, {
    id: 2,
    name: 'Course2'
  }];

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 
<div ng-app="app" ng-controller="myCtrl" class="container">
<table>
      <tr ng-repeat="student in studentList">
        <td>{{student.name}}</td>
        <td>
          <select ng-model="student.courseSelected" ng-options="course as course.name for course in courseList">
    </select>
         
        </td>
        <td>
          {{student.courseSelected.name}}
          </td>
      </tr>
   </table>
  <label class="item item-input">
    <span class="input-label">Select date</span>
    
  </label>

  <pre>{{dateOption}}</pre>
</div>

Answer 2

我认为你应该在标签中使用 ng-options，例如：

<select ng-model="courseSelected" ng-options= "course.id for course in courseList">

也许您应该阅读这些文档以获得更多解释：

https://docs.angularjs.org/api/ng/directive/ngOptions

https://docs.angularjs.org/api/ng/directive/select

Answer 3

<select ng-model="student.courseId" ng-options="course.name as course.id for course in courseList">

这应该可以为您提供所需的内容。我假设一门课程具有name 属性。但是您可以在 ng-options 指令中使用您喜欢的任何属性为课程命名。更多文档可以在here找到。