javascript - 如何使用 AngularJS 访问此 JSON 文件的子元素？

Question

这是一个 Plunkr，显示了 JSON 文件的基本 ng-repeat 渲染：

Plunkr

我正在渲染 $scope.foodlist 中的元素，如下所示：

        <li ng-repeat="food in foodlist">
            <p>Title: {{ food.title }}</p>
            <p>Code: {{ food.code }}</p>
            <p>Unit {{ food.unit }}</p>
        </li>

因为 "unit" 有一个名为 "title" 的子元素，所以上面的渲染如下：

 Title: Walnußbrot
 Code: X 39 2000002
 Unit [{"title":"Scheiben"}]

尝试像这样定位单元的标题是行不通的：

 <p>Unit {{ food.unit.title }}</p>

如何让“单元”内的元素“标题”打印？我是否需要向 Angular 控制器添加一些额外的东西来定位这个子元素？

Answer 1

unit在你的 json 里面是一个列表。

因此，您需要使用索引或使用来访问项目ng-repeat：

<p>Unit {{ food.unit[0].title }}</p>

或者

<p ng-repeat="title in food.unit">Unit {{ title.title }}</p>