Angular 属性（变量）在视图中的使用

Question

我有学校名单和教师名单。

学校

    [
    {
    "id": 1,
    "nameOfInstitution": "Summer Elementary",
    "schoolLevel": "01304"
    },
    {
    "id": 2,
    "nameOfInstitution": "Grady Middle",
    "schoolLevel": "02400"
    }
    ]

教师

[
{
  "id": "1",
  "school": "1",
  "name": {
    "lastOrSurname": "HARRISON",
    "firstName": "JOHN",
    "middleName": ""
  }
},
{
  "id": "2",
  "school": "1",
  "name": {
    "lastOrSurname": "Nelson",
    "firstName": "Darren",
    "middleName": ""
  }
},
{
  "id": "3",
  "school": "2",
  "name": {
    "lastOrSurname": "Stewart",
    "firstName": "Manuel",
    "middleName": ""
  }
}]

在我的控制器中 ...

$scope.schools = schools;
$scope.teachers = teachers;

问题与视图有关。我怎样才能做到这一点？

暑期小学
- 约翰·哈里森
- 达伦尼尔森
格雷迪中间
- 曼纽尔管家

我一直在使用 "ng-repeat" 指令，但如何才能只显示属于每个学校的教师？

谢谢！

Answer 1

您可以在 ng-repeat 中过滤教师：

<div ng-repeat="school in schools">
  <div ng-repeat="teacher in teachers | filter: {school: school.id}">

但请务必为每个教师使用的学校添加 id 属性。

或者如果 teacher.school 属性是学校数组中的学校索引，您可以这样做：

<div ng-repeat="school in schools">
  <div ng-repeat="teacher in teachers | filter: {school: $index}">

最后一点：这会奏效，但如果你有很多学校和老师，在显示它之前从 javascript 执行过滤会更高效，即构建一个像 [=15= 这样的结构]

schools = [{
  nameOfInstitution: ...,
  schoolLevel: ...,
  teachers: [{
    lastOrSurname: ...
  }]
  // ... etc
}];

Answer 2

使用过滤器：

<div ng-repeat="school in schools">
  {{school.nameOfInstitution}}
<p ng-repeat="teacher in teachers | filter:{school: ''+ ($index+1)}:true">
  {{teacher.name.lastOrSurname}}
</p>
</div>

但是你最好有一些学校的身份证...

Angular 属性（变量）在视图中的使用

Angular properties (variables) use in the view

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat