javascript - 为什么我不能访问 AngularJS Controller 的子元素？

Question

我猜这可能已被回答一百万次，但我没有合适的语言来描述这个特定问题。本质上我不能做类似 $ctrl.thing.subelement 的事情。以下工作正常:

<div class="col-md-10" ng-repeat="p in $ctrl.patient">
  <!--Body content-->
  <p>{{p.name}}</p>
  <p>{{p.id}}</p>
</div>

这会打印患者姓名和 ID——我想要的行为——除非我不需要重复。我希望能够在整个页面中引用特定的 patient 元素。

同样，这会将所有患者的信息打印为 JSON 纯文本(这就是所有内容的存储方式)。

<div class="col-md-10">
  <!--Body content-->
  <p>{{$ctrl.patient}}</p>
</div>

以下是行不通的(这是我真正想要的)

<div class="col-md-10">
  <!--Body content-->
  <p>{{$ctrl.patient.name}}</p>
  <p>{{$ctrl.patient.id}}</p>
</div>

我在这里错过了什么？为什么我可以在 div 中访问 $ctrl.patient 但不能访问 $ctrl.patient.name？

Answer 1

很简单，因为 $ctrl.patient 不是代表单个患者的对象，它是一组患者——这就是您迭代它的原因。所以你需要知道你想通过索引访问数组中的哪一项，然后使用:

{{$ctrl.patient[0].name}}

其中 0 是您想要的记录的索引。