提问者:小点点

AngularJS-nested ng-使用select/option重复,获取/设置所选值


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

    <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都来自数据库表,学生表/对象有一个courseId列/引用。换句话说,默认选择的课程和更改后的课程选项(如果发生这种情况)背后有逻辑:student.courseId=course.id

任何帮助,不胜感激。


共3个答案

匿名用户

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

这应该能帮你找到你想要的东西。我假设课程具有name属性。但是你可以在ng-tions指令中用你喜欢的任何属性为课程别名。更多留档可以在这里找到。

匿名用户

我认为你应该在标签中使用ng选项,比如:

<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

匿名用户

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>