re-filling Angular Select(s)

Question

I am pretty new with angular , so i need all the help possible. My problem is as follows. I have a html form where in there are 2 selects, the data for the selects is fetched from an $http call , the data structure retrieved is something in the following lines:-

[
{
"_id":"54e231b45f353d5c25cc4c30",
"staff_email":"aash_comm@rediffmail.com",
"staff_name":"Aarti Gupta",
"staff_address":"South Ex., Delhi",
"school":"54e2318d5f353d5c25cc4c0b",
"staff_designation":"",
"staff_mobile_no":"",
"staff_gender":"Female",
"staff_dob":"7-Jan-1984",
"staff_sum":"",
"__v":0,
"staff_is_classteacher":false,
"staff_classes":[
{
"_id":"54e231a25f353d5c25cc4c1f",
"class_name":"Class VI",
"class_section":"B"
},
{
"_id":"54e231a25f353d5c25cc4c1d",
"class_name":"Class VII",
"class_section":"C"
}
]
},
{
"_id":"54e231b55f353d5c25cc4c31",
"staff_email":"aishwaryataneja@gmail.com",
"staff_name":"AISHWARYA TANEJA",
"staff_address":"2356/4, KAROL BAG, NEW DELHI",
"school":"54e2318d5f353d5c25cc4c0b",
"staff_designation":"",
"staff_mobile_no":"",
"staff_gender":"Female",
"staff_dob":"21-Sep-1983",
"staff_sum":"",
"__v":0,
"staff_is_classteacher":false,
"staff_classes":[
{
"_id":"54e231a25f353d5c25cc4c1d",
"class_name":"Class VII",
"class_section":"C"
}
]
}
]

ok so as is evident from the dataset it is basically an array containing details of teachers and the classes taught by them. Filling the 1st select with the name of the teachers is easy using ng-options, same goes for the 2md select which will be populated the listing of classes as mentioned in the data-set.

My pain area is that i want to change the data in the 2nd select based on the option chosen in the 1st select, i have tried using a function on the ng-change of the 1st select but the 2nd select does not get filled with relevant data.

In a nutshell if the 1st select contains teacher1 and teacher1 teaches class1 & class2 then the 2nd select should just display class1 & class2 , and then if the selection in the 1st select changes from teacher1 to teacher2 and teacher2 teaches class3 & class4 then the 2nd select should display only class3 & class4 and so on..

TIA

Possible duplicate of [cascading-select-dropdowns](http://stackoverflow.com/questions/18723399/cascading-select-dropdowns) — T.Z., Mar 03 '15 at 12:45

Panchitoboy · Accepted Answer · 2015-03-03T12:54:00.450

0

You can use something like this:

First selector:

<select ng-model="teacher" ng-options="your options"></select>

Second selector:

<select ng-model="teacher" ng-options="class.class_name for class in teacher.staff_classes"></select>

Working fiddle: https://jsfiddle.net/jy37Lno0/2/

edited Mar 03 '15 at 12:54

answered Mar 03 '15 at 12:45

Panchitoboy

810
9
18

score 0 · Answer 2 · answered Mar 03 '15 at 13:20

I made an example for you. This is the angular way to do it. Maybe you should check again how you store data and use a Service. I made a simple example.

function testCtrl($scope) {
     $scope.teachers = [
        { staff_name : "franck", classes: ['math','history','science','poney','bar']},
        { staff_name : "max", classes: ['french','math','science']}
    ];
}

select {
      width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app>
  <div ng-controller="testCtrl">
      <select name="teacherChoice" 
              ng-model="selectedTeacher"
              ng-options="teacher.staff_name for teacher in teachers"
          ></select>
      <br>
      <select name="classChoice"
              ng-model="selectedClass"
              ng-options="class as class for class in selectedTeacher.classes">{{class}}</select>
          
  
      You have a {{selectedClass || 'mysterious'}} lesson with {{selectedTeacher.staff_name || 'no one'}}.
     </div> 
</div>

re-filling Angular Select(s)

2 Answers2