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

Question

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

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

你的json中的

unit是一个列表。

因此，您需要使用索引或使用ng-repeat：

来访问项目

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

或者

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