使用 AngularJS 访问视图中的控制器值答案

【问题标题】：Accessing controller values in view using AngularJS使用 AngularJS 访问视图中的控制器值
【发布时间】：2016-04-27 22:44:31
【问题描述】：

我正在尝试使用 AngularJS 在视图中显示来自 JSON 嵌套数组的值。

我检查了 console.log() 上的输出，并且 JSON 对象按预期返回。但我想在我的视图中显示详细信息。特别是我想将它们显示为所有高级值及其相关的子级值。

这是我的 app.js，它获取 JSON 并对其进行迭代以获取所有高级值及其关联的子级项。

angular.forEach($scope.data, function(value, key)
{
    // Gets the high level items - WORKING
    console.log("Check Item Description: " + value.checkitemdesc);

    angular.forEach(value.options, function(v, k)
    {
        // Gets the sub-level items - WORKING
        console.log("Check ID: " + v.fleetcheckid);
        console.log("Check Value Description: " + v.checkvaluedesc);
    });
});

然后我想在 Onsen UI 中显示高级项目Switch in List Item Component

<ul class="list">
    <li class="list__item" ng-repeat="val in value">  
    {{val.checkitemdesc}} <!-- NOT WORING HERE -->
        <label class="switch switch--list-item">
            <input type="checkbox" 
                class="switch__input" 
                checked 
                onclick="modal.show('modal')">
            <div class="switch__toggle"></div>
        </label>
    </li>
</ul>

如何访问由 forEach 循环返回的值数组？我试图在我的外部 forEach 循环中创建一个数组，然后将每个值推送给它，但得到错误提示值是 undefined

$scope.itemDescriptionArray.push(value.checkitemdesc);

【问题讨论】：

您的数据在 scope.data 上，但在模板中您尝试访问它，就好像它在 scope.value 上一样。将外部 ng-repeat 更改为 "val in data"，您应该一切顺利。
完美，谢谢。就在这一点上，我如何访问内部的 forEach 值呢？我也在类似的列表中尝试了 ng-repeat="checkValueDescriptions in value.options" 但没有运气。 抓住稻草
如果你在外循环上使用了val in data，那么每个循环实例都会有变量名“val”——所以使用val.options。

标签： arrays angularjs json onsen-ui monaca

【解决方案1】：

假设你有这个层次结构：

$scope.items = {
 id1: {
  foo: 'bar'
 }
 id2: {
  foo: 'foo'
 }
}

如果你想在模板中迭代它，你最终会做这样的事情：

<ul ng-repeat="(id,item) in items">
   Item {{id}}
   <li ng-repeat="(key,value) in item">
    {{key + '=>' + value}}
   </li>
</ul>

如果你想迭代一个非关联数组，那么你不需要在模板上定义元组。

【讨论】：