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

AngularJS data binding within another data binding

本文关键字：数据绑定 AngularJS 另一个      更新时间：2023-09-26

我刚刚进入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 对象是来自数据库的真实数据输出的一部分。 我需要将这些数据动态放入表中

网页就像

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

但显然它不起作用。

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

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

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

{{ }}里面的表达式（胡子？）的计算范围非常狭窄，就像常规javascript的计算方式一样。

使用 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 指令的 Angular 文档（查找"键，值"）

相关文章：