如何循环通过'键'AngularJS对象的值

How to loop through the 'key' value of an object with AngularJS?

本文关键字：对象 AngularJS 何循环 循环      更新时间：2023-09-26

我有以下数据和HTML模板(显然还有app.js中的其他代码(。我的"tbody"中的代码工作得很好，并显示了这样一个表：

电流输出

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

现在我正试图循环浏览第一个对象的"键"，并将它们显示在类似于的"thead"中

所需输出

--------------------
| 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。

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

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

如果您使用underscoreJS(这是一个非常常见且功能强大的便利库(，那么您可以获得第一个对象的密钥，如下所示：

_.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的(key, value)语法。然而，我认为这在您的情况下不起作用，因为迭代的顺序是随机的。

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

@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>

希望得到帮助。

相关文章：