Angular.js:如何访问嵌套的对象文字

Angular.js: How to access nested object literals

本文关键字：嵌套 对象 文字 访问 js 何访问 Angular      更新时间：2023-09-26

我有以下数据结构：

{ 
    current: { Number: '8', AnotherNumber: 123 },
}
{ 
    current: { Number: '9', AnotherNumber: 456 },
}

我想在角度视图中打印出表格：

Number  AnotherNumber
8       123

我正在尝试这个，但它显示了整个当前对象

  <li ng-repeat="friend in friends">
        <span ng-repeat="(key, value) in friend">
            {{friend.current}}
        </span>
  </li>

在您的案例中，单个friend元素是一个对象{current:{}}，用于迭代键和值，您应该执行以下操作：

<li ng-repeat="friend in friends">
    <span ng-repeat="(key, value) in friend.current">
        {{key}} {{value}}
    </span>
</li>

http://plnkr.co/edit/hWKl262YIi0IBhIebJGz?p=preview工作plnkr示例

您的代码应该如下所示：

<table>
    <tr>
        <th>Number</th>
        <th>AnotherNumber</th>
    </tr>
    <tr ng-repeat="friend in friends">
        <td>{{friend.current.Number}}</td>
        <td>{{friend.current.AnotherNumber}}</td>
    </tr>
</table>

与这个问题无关，但为了简洁起见，余可以这样做：

<table>
    <tr><th>Number</th><th>AnotherNumber</th></tr>
    <tr ng-repeat="friend in friends" ng-init="c=friend.current">
        <td>{{c.Number}}</td><td>{{c.AnotherNumber}}</td>
    </tr>
</table>

更新：

如果你愿意，你可以在键上"盲目"迭代，但这会导致列按字母顺序排序（除非你添加更多的代码来明确指定它们的顺序）：

<table>
    <tr>
        <th ng-repeat="key in firends[0]">{{key}}</th>
    </tr>
    <tr ng-repeat="friend in friends">
        <td ng-repeat="(key value) in friends">{{value}}</td>
    </tr>
</table>

另请参阅简短演示。

相关文章：