Question

我很有角度，所以我需要所有的帮助。我的问题如下。我有一个html表单，其中有2个选项，选择的数据是从$ http调用中获取的，检索的数据结构是以下几行： -

[
{
"_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"
}
]
}
]

从数据集中可以明显看出它基本上是一个包含教师细节和他们所教授的课程的数组。使用ng-options使用教师名称填写第一个选择是很容易的，2md选择也是如此，它将填充数据集中提到的类列表。

我的痛苦方面是我想根据第一次选择中选择的选项更改第二次选择中的数据，我尝试使用第一次选择的ng-change上的功能，但是第二次选择没有得到填写相关数据。

简而言之，如果第一个选择包含teacher1而teacher1教授class1＆amp; class2然后第二个选择应该只显示class1＆amp; class2，然后如果第一个选择中的选择从teacher1更改为teacher2而teacher2教授class3＆amp; class4然后第二个选择应该只显示class3＆amp; class4等等..

TIA

Answer 1

您可以使用以下内容：

第一个选择器：

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

Answer 2

我为你做了一个例子。这是一种有角度的方式。也许您应该再次检查存储数据和使用服务的方式。我做了一个简单的例子。

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>

重新填充Angular Select（s）

2 个答案: