Javascript 在AngularJS中显示嵌套JSON

我有一个用AngularJS、Onsen UI和Monaca开发的跨平台应用程序

在我的一个页面上，我进行了一个API调用，向我返回一个嵌套的JSON对象。我可以使用$http.get（）读取JSON对象，我可以循环JSON并显示高级项，但我似乎无法显示嵌套项

我要做的是将高级项显示为文本字段，然后将嵌套项显示为每个高级项的单选按钮

我的JSON文件示例如下所示：

[{
    "itemID": "1",
    "itemDescription": "Apple",
    "options": [{
        "fruitCheckID": "1",
        "fruitDescription": "Ok"
    }, {
        "fruitCheckID": "2",
        "fruitDescription": "Not Ripe"
    }, {
        "fruitCheckID": "3",
        "fruitDescription": "Rotten"
    }]
}, {
    "itemID": "2",
    "itemDescription": "Orange",
    "options": [{
        "fruitCheckID": "1",
        "fruitDescription": "Ok"
    }, {
        "fruitCheckID": "2",
        "fruitDescription": "Not Ripe"
    }, {
        "fruitCheckID": "3",
        "fruitDescription": "Rotten"
    }]
}]

在我的fruit.html页面中，我想将水果名称（itemDescription）显示为一个文本字段，每个“水果描述”项目的单选按钮位于其下方

我的fruit.html页面如下所示：

<ul class="list">
    <li class="list__item" ng-repeat="checkItemDescription in data">
        <span class="list__item__line-height"><strong>{{checkItemDescription.itemDescription}}</strong></span>  <!-- WORKING HERE -->

        <label class="checkbox">
            <input type="checkbox"
                ng-click="toggleSelection(checkItemDescription.itemDescription)">
            <div class="checkbox__checkmark"></div>
            {{checkItemDescription.options}}  <!-- NOT WORKING HERE -->
        </label>
    </li>
</ul>

有人能告诉我显示嵌套值的格式哪里出了问题吗？

请尝试使用此代码

 <ul class="list">
<li class="list__item" ng-repeat="checkItemDescription in data">
    <span class="list__item__line-height"><strong>   {{checkItemDescription.itemDescription}}</strong></span>  <!-- WORKING HERE -->

    <label class="checkbox">
        <input type="checkbox"
            ng-click="toggleSelection(checkItemDescription.itemDescription)">
        <div class="checkbox__checkmark" ng-repeat="options in data.options "></div><!-- use ng-repeat here -->
        {{options.fruitDescription}}  
    </label>
</li>

{{checkItemDescription.itemDescription}}
{{options.fruitDescription}

---

你的问题也有答案。使用2 foreach显示所有项目时，您需要在选项上重复第2个ng以显示单选按钮。请尝试以下操作：

{{angular.toJson（options.fruitDescription）}

 <ul class="list">
<li class="list__item" ng-repeat="checkItemDescription in data">
    <span class="list__item__line-height"><strong>   {{checkItemDescription.itemDescription}}</strong></span>  <!-- WORKING HERE -->

    <label class="checkbox">
        <input type="checkbox"
            ng-click="toggleSelection(checkItemDescription.itemDescription)">
        <div class="checkbox__checkmark" ng-repeat="options in data.options "></div><!-- use ng-repeat here -->
        {{options.fruitDescription}}  
    </label>
</li>