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.

chukkwagon · Accepted Answer · 2016-04-26 17:53:35Z

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, 2016 at 17:53

chukkwagon

6347 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2217057 Over a year ago

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.

chukkwagon Over a year ago

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 Over a year ago

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

user2217057 Over a year ago

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 stackoverflow.com/questions/12654631/…

chukkwagon Over a year ago

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

oguzhan00 · Accepted Answer · 2016-04-26 18:03:17Z

0

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

answered Apr 26, 2016 at 18:03

oguzhan00

5098 silver badges16 bronze badges

Comments

Mohsin Muzawar · Accepted Answer · 2016-04-26 18:32:58Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related