重新填充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）

回答

相關問題