重新填充Angular Select（s）

我很新的角度，所以我需要所有可能的帮助。我的问题如下。我有其中有2种选择，对于选择是从$ HTTP调用中取出的数据的HTML形式，所检索的数据结构是一些在下列行： -重新填充Angular Select（s）

[ 
{ 
"_id":"54e231b45f353d5c25cc4c30", 
"staff_email":"[email protected]", 
"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":"[email protected]", 
"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" 
} 
] 
} 
]

确定，所以为是明显从数据集中，它基本上是一个包含教师细节和他们教授的课程的数组。使用ng-options填充第一个选择和教师的名字是很容易的，对于第二个选择也是一样的，它将填充数据集中提到的类的列表。

我的痛苦地区是，我想改变第二选择基于在第一选择中选择的选项中的数据，我已经尝试使用第一选择ng变化的功能，但第二选择不充满相关数据。

在如果第一选择简而言之包含teacher1和teacher1教class1的&类class2，则第二选择应该只是显示class1的&的Class2，然后如果在第一选择中选择从teacher1变化teacher2和teacher2教CLASS3 & CLASS4那么第二个选择应该只显示CLASS3 & CLASS4等..

TIA

来源

2015-03-03 Adik

的[级联选 - 下拉菜单（http://stackoverflow.com/questions/18723399/cascading-select-dropdowns） – 2015-03-03 12:45:18

您可以使用这样的事情：

第一选择：

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

第二选择：

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

工作小提琴：https://jsfiddle.net/jy37Lno0/2/

来源

2015-03-03 12:45:32 Panchitoboy

感谢，它的工作我要是有可能的复制想到这之前:) – Adik 2015-03-03 16:33:00

很高兴帮助:) – Panchitoboy 2015-03-03 16:34:05

我做了一个例子给你。这是做这件事的角度。也许你应该再次检查你如何存储数据和使用服务。我举了一个简单的例子。

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>

来源

2015-03-03 13:20:50

重新填充Angular Select（s）

回答

相关问题