Question

我刚刚进入AngularJS世界，需要我正在处理的应用程序的解决方案。

所以这是模块的定义。

var samplesApp = angular.module('samples', []);

samplesApp.controller('samplesController', function ($scope) {
   var jsonObj=
      [
         {"ACTION":"UPDATE","ID":"22","ROUTE":"0015"},
         {"ACTION":"DELETE","ID":"20","ROUTE":"0015"},
         {"ACTION":"UPDATE","ID":"19","ROUTE":"0015"}
      ]
    $scope.records = jsonObj;

    var columnNames = [];
    for (var key in jsonObj[0]) {
        columnNames.push(key);
    }

    $scope.columnNames = columnNames;

});

$ scope JSON对象是来自数据库的实际数据输出的一部分。我需要动态地将这些数据放入表中

html就像

<table>
    <thead>
        <th data-ng-repeat="column in columnNames">{{column}}</th>
    </thead>
    <tr data-ng-repeat="record in records">
        <td data-ng-repeat="column in columnNames">{{ record.{{ column }} }}</td>
    </tr>
</table>

因为我不知道列名是什么，所以我创建了一个进程来获取所有列名并将它们推送到$ scope.columnNames。然后将其绑定到表头。这部分没有问题。问题是我不知道如何获得特定列的价值响应。我试图这样做：

<td data-ng-repeat="column in columnNames">{{ record.{{ column }} }}</td>

但显然它不起作用。

有人可以给我一些建议吗？真的很感激。

Answer 1

尝试使用括号，如下所示：

<tr data-ng-repeat="record in AllRecords">
    <td data-ng-repeat="column in columnNames">{{ record[column] }}</td>
</tr>

{{ }}（mustaches？）中的表达式被评估得非常简单，以评估常规javascript的评估方式。

Answer 2

使用record [column]操作符进行访问是可以的，但是你可以尝试另一种选择。在这个例子中，语义代码更好一些，你的耦合更少（你的行只是取决于数据，而不是标题中使用的变量：

<table>
    <tr>
        <th data-ng-repeat="column in columnNames">{{column}}</th>
    </tr>

    <tr data-ng-repeat="record in records">
        <td data-ng-repeat="(key,value) in record">{{value}}</td>
    </tr>
</table>

以下是您的数据的工作示例：http://plnkr.co/edit/CskLQ2ZZlYIURdNPXiZt?p=preview

以下是ngRepeat directive的Angular文档（查找“键，值”）

AngularJS数据绑定在另一个数据绑定中

2 个答案: