如何使用 AngularJS 遍历对象的“键”值？答案

【问题标题】：How to loop through the 'key' value of an object with AngularJS?如何使用 AngularJS 遍历对象的“键”值？
【发布时间】：2015-07-05 22:26:03
【问题描述】：

我有以下数据和 HTML 模板（显然还有 app.js 中的其他代码）。我的“tbody”中的代码完美运行，并显示如下表格：

电流输出

--------------------
| AAPL | 127 | 128 |
--------------------
| GOOG | 523 | 522 |
--------------------
| TWTR |  35 |  36 |
--------------------

现在我正在尝试遍历第一个对象的“键”并将它们显示在一个“头”中，如下所示：

期望的输出

--------------------
| Name | jan | feb |
--------------------
| AAPL | 127 | 128 |
--------------------
| GOOG | 523 | 522 |
--------------------
| TWTR |  35 |  36 |
--------------------

数据

$scope.data = [
{  
    "name": "AAPL",
    "jan": "127",
    "feb": "128"
},
{
    "name": "GOOG",
    "jan": "523",
    "feb": "522"
},
{
    "name": "TWTR",
    "jan": "35",
    "feb": "36"
}]

html

<table>
    <thead>
        <tr>
            <td ng-repeat="">{{}}</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="object in data">
            <td ng-repeat="(a,b) in object">{{b}}</td>
        </tr>
    </tbody>
</table>

有人指出这个问题是另一个问题的重复，虽然，另一个是纯JS，这个问题使用AngularJS。

【问题讨论】：

best way to get the key of a key/value javascript object 的可能重复项
@murid：您的代码有效，检查您是否链接到 Angular 库，或正确链接 ng-app、ng-controller...
那是普通的 JS，我需要 Angular 中的一些东西，类似于“ng-repeat”，但不会重复，只会吐出 1 个值。
@hungndv 就像我说的，tbody 有效。我需要代码。
How can I iterate over the keys, value in ng-repeat in angular的可能重复

标签： javascript html angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

<td ng-if="data.length" ng-repeat="(a,b) in data[0]">{{a}}</td>

您只需要考虑键值总是以相同的顺序出现，否则表格会以错误的顺序显示值。

【讨论】：

是的！我们有一个赢家！

【解决方案2】：

如果你使用 underscoreJS（这是一个非常常见且称职的便利库），那么第一个对象的 you can get the keys 是这样的：

_.keys(data[0])

这假定数组中的所有元素都具有相同的键和结构。看起来很像，所以你应该是安全的。

在您的应用中包含 UnderscoreJS 后，您可以从模板中的括号表达式中调用它：

 <td ng-repeat="">{{ _.keys(data[0])}}</td>

纯ES5解决方案

如果你对一个库有困难，并且你可以忍受 ES5，那么你可以使用

Object.keys(data[0])
<td ng-repeat="">{{ Object.keys(data[0]) }}</td>

【讨论】：

Angular 中没有什么东西吗？一定有……
当然，只是其他人已经回答了，但是您认为哪种语法读起来更干净？同样，使用此策略，您可以将提取的密钥放在代码中的任何位置（例如控制器），并且仍然具有相同的干净代码。我建议阅读更多关于 UnderscoreJS 的内容；它的函数式风格受到 Ruby、Lambda 和表亲等现代语言的影响。
@murid 同样，您可以使用 cmets 中链接的“可能重复”问题中的答案；但是，你也有一些读起来很尴尬的东西。至少使用 Object.keys(data[0]) 将是 ES5，并且也可以在需要的地方使用。

【解决方案3】：

You use use Angular's (key, value) syntax. 但是，我认为这不适用于您的情况，因为迭代的顺序是随机的。

我认为最好的办法是对 $scope.headings 变量中的键进行硬编码，或者更新数据的格式（如果您可以控制它的生成方式），以便指定键的顺序。

【讨论】：

【解决方案4】：

@murid，你需要这个吗：

在头部的脚本标签中：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.data = [{
        "name": "AAPL",
            "jan": "127",
            "feb": "128"
    }, {
        "name": "GOOG",
            "jan": "523",
            "feb": "522"
    }, {
        "name": "TWTR",
            "jan": "35",
            "feb": "36"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <table>
        <thead>
            <tr>
                <td ng-repeat="">{{}}</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="object in data">
                <td ng-repeat="(a,b) in object">{{b}}</td>
            </tr>
        </tbody>
    </table>
</div>

希望对您有所帮助。

【讨论】：