AngularJS - nested ng-repeat with select/option, get/set the selected value

Question

I am trying to set two ng-repeat loops, one of which, the nested one, is a select/option drop down. I checked other similar posts, but still not sure how to define the ng-model in HTML to get/set the default value/option in the select box.

    <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>

Both studentList and courseList come from the database tables, and the student table/object has a courseId column/reference. In other words, the default selected course and the changed course option (if this happens) would have the logic behind them : student.courseId = course.id

Any help is appreciated.

score 1 · Accepted Answer · answered Apr 26 '16 at 17:53

1

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

This should get you what you're looking for. I assumed that a course has the name property. But you can alias the course with any property you like in the ng-options directive. More documentation can be found here.

answered Apr 26 '16 at 17:53

chukkwagon

614
6
11

Hmm...I might be missing something, but this does not seem to pick up the default value/name on page load. The select box remains blank, but of course when I click to drop the course list, I can see the courses. – user2217057 Apr 26 '16 at 18:21
you have to set a default value explicitly in the angular code as well. it can't read the default value off of your db model. Do you mean the db default? or the initial value of student.courseId when it loads? – chukkwagon Apr 26 '16 at 18:51
if student.courseId is `null`, `undefined`, or a blank string, angular doesn't know how to initialize the `ng-model`, so it will generate a blank option at the top of the select. it's a known bug in angularjs – chukkwagon Apr 26 '16 at 18:59
With static JSON data all seems working fine, but from the DB call when I get the two sets of data, studentList and courseList, the first option shows ? as value. Same issue as here http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select – user2217057 Apr 26 '16 at 21:28
correct, like i said, this has to do with how angular determines the `ngModel` for the element in question. That's outside of the scope of this question though. if i answered your initial question, could you accept my response? if not, i can provide some more help. thanks – chukkwagon Apr 26 '16 at 22:51

score 0 · Answer 2 · answered Apr 26 '16 at 18:03

I think you should use ng-options in tag like:

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

maybe you should read these documentation for more explanation :

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

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

score 0 · Answer 3 · answered Apr 26 '16 at 18:32

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>

AngularJS - nested ng-repeat with select/option, get/set the selected value

3 Answers3