使用AngularJS中的ng-repeat创建动态表格

Question

使用AngularJS中的ng-repeat创建动态表格

4

我希望生成动态表格，表头和行/列是根据来自 WebAPI 的 JSON 对象动态生成的。

这里是每次都不同的JSON对象示例。

[
  {"Country":"Australia","Toner Quantity":8},
  {"Country":"China","Toner Quantity":6},
  {"Country":"India","Toner Quantity":11},
  {"Country":"South Korea","Toner Quantity":1}
]

有时它会像这样出现

[
  {"CustomerName":"FORD","Australia":0,"China":2,"India":0,"South Korea":0},
  {"CustomerName":"ICICI PRUDENTIAL","Australia":0,"China":0,"India":5,"South Korea":0},
  {"CustomerName":"Kimberly Clark","Australia":0,"China":0,"India":0,"South Korea":1},
  {"CustomerName":"McDonalds","Australia":1,"China":0,"India":0,"South Korea":0},
  {"CustomerName":"Novartis","Australia":1,"China":0,"India":0,"South Korea":0},
  {"CustomerName":"Origin Energy","Australia":3,"China":0,"India":0,"South Korea":0}
]

所以我尝试过但无法实现带有标题和行/列的动态表格。

我的html代码如下：

<table class="table striped">
  <thead>
    <tr role="row">
      <th ng-repeat="th in dataconfigureListData.previewData">{{th}}</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" data-ng-repeat="previewData in dataconfigureListData.previewData">
      <td> {{previewData.Country}}</td>
      <td> {{previewData['Total Toner Qty']}}</td>
    </tr>
  </tbody>
</table>

- Dixit

你到目前为止做了什么？你的代码是什么？ - anshuVersatile

哪里？你尝试过的代码。 - Jigar7521

$scope.dataconfigureListData.previewData = data.ResponseData; 它存储来自 Web API 的数据。 - Dixit

在这种情况下，您的代码是正确的。 - dfsq

但我无法像这样显示标题。 - Dixit

显示剩余3条评论

3个回答

0

逻辑是通过使用Object.keys在第一个对象属性上进行迭代以获取标题。

要仅从单元格本身获取值，您可以使用ng-repeat和(key, value) in some_obj。

这里是一个完整的示例：

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.data1 = [
    {"Country":"Australia","Toner Quantity":8},
    {"Country":"China","Toner Quantity":6},
    {"Country":"India","Toner Quantity":11},
    {"Country":"South Korea","Toner Quantity":1}
  ];

  $scope.data2 = [
    {"CustomerName":"FORD","Australia":0,"China":2,"India":0,"South Korea":0},
    {"CustomerName":"ICICI PRUDENTIAL","Australia":0,"China":0,"India":5,"South Korea":0},
    {"CustomerName":"Kimberly Clark","Australia":0,"China":0,"India":0,"South Korea":1},
    {"CustomerName":"McDonalds","Australia":1,"China":0,"India":0,"South Korea":0},
    {"CustomerName":"Novartis","Australia":1,"China":0,"India":0,"South Korea":0},
    {"CustomerName":"Origin Energy","Australia":3,"China":0,"India":0,"South Korea":0}
  ];

  $scope.getHeaders = function(arr) {
    return Object.keys(arr[0]);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <tr>
      <td ng-repeat="header in getHeaders(data1)">{{header}}</td>
    </tr>
    <tr ng-repeat="row in data1">
      <td ng-repeat="(key, value) in row">{{value}}</td>
    </tr>
  </table>
  <hr />
  <table>
    <tr>
      <td ng-repeat="header in getHeaders(data2)">{{header}}</td>
    </tr>
    <tr ng-repeat="row in data2">
      <td ng-repeat="(key, value) in row">{{value}}</td>
    </tr>
  </table>
</div>

- Mosh Feu

-2

我正在使用Angular 1.6

这里标记的列以及其值都是动态的。我的表结构如下。

<table class="table table-bordered table-hover">
    <thead>
        <tr>
           <th>Doctor</th>
           <th>Target</th>
           <th ng-repeat="brand in doctorTargets.brands">{|| brand.name ||}</th>
         </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in doctorTargets.doctorTargets">
           <td>{|| item.doctorName ||}</td>
           <td>{|| item.target ||}</td>
           <td ng-repeat="brand in item.brands">{||brand.target||</td>                                    
        </tr>
     </tbody>
</table>

- sh6210

在你的例子中，item.doctorName和item.target是固定的键值，但在我的情况下，这些值也是动态的。 - Dixit

@Dixit 在我的示例中，我放置并说明了我为动态列生成所做的工作。如果您需要其他内容，请跳过它。但是我的代码按预期功能运行。您在我的代码中找到任何错误了吗？ - sh6210

我明确表示我想要根据来自WebAPI的JSON对象生成具有动态表头和行/列的动态表格，但您没有提供正确的解决方案来实现动态表头和行/列。 - Dixit

在我的帖子中，“brand.name”是动态表头，“brand.target”也相应地是动态的。 - sh6210

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lenilsondc · Accepted Answer

您可以通过在另一个ng-repeat内部使用它来实现此操作。同时，使用第一行来呈现标题。

关于 ngRepeat 的注意事项: 不知何故，angularjs@1.4.0 以前的版本在使用 key in object 的时候会按字母顺序排序键值。 解决这个问题的简单方法是升级到 angularjs@^1.4.0 版本，这个问题已经被修复了。

Angular 文档宣布了这个变化：

需要注意的是，JavaScript 规范没有定义返回对象键的顺序。（为了解决这个问题，在 Angular 1.3 中，ngRepeat 指令会按字母顺序排序键值。）

版本 1.4 移除了按字母顺序排序的功能。现在我们依赖浏览器运行时返回 key in myObj 的顺序。似乎浏览器通常会按照键值定义的顺序提供键值，但是当键值被删除和恢复时可能会有例外情况。请参见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#Cross-browser_issues

参考资料：遍历对象属性

以下代码片段实现了这个解决方案。

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.myArray = [
      { "CustomerName": "FORD", "Australia": 0, "China": 2, "India": 0, "South Korea": 0 },
      { "CustomerName": "ICICI PRUDENTIAL", "Australia": 0, "China": 0, "India": 5, "South Korea": 0 },
      { "CustomerName": "Kimberly Clark", "Australia": 0, "China": 0, "India": 0, "South Korea": 1 },
      { "CustomerName": "McDonalds", "Australia": 1, "China": 0, "India": 0, "South Korea": 0 },
      { "CustomerName": "Novartis", "Australia": 1, "China": 0, "India": 0, "South Korea": 0 },
      { "CustomerName": "Origin Energy", "Australia": 3, "China": 0, "India": 0, "South Korea": 0 }
    ];
  });

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

table {
  border-collapse: collapse;
}
td,
th {
  padding: 2px 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<table ng-controller="myController" border="1">
  <tr>
    <th ng-repeat="(key, val) in myArray[0]">{{ key }}</th>
  </tr>
  <tr ng-repeat="row in myArray">
    <td ng-repeat="column in row">
      {{ column }}
    </td>
  </tr>
</table>

下面的示例实现了动态按列标题排序，通过单击列标题进行排序，再次单击选定的列可以进行反向排序

angular.module('myApp', [])
  .controller('myController', function($scope) {
  
    $scope.sortByColumn = 'CustomerName';
    $scope.sortByReverse = false;
    $scope.sortBy = function(column) {
      if (column === $scope.sortByColumn) {
        $scope.sortByReverse = !$scope.sortByReverse;
      } else {
        $scope.sortByReverse = false;
      }

      $scope.sortByColumn = column;
    };
    
    $scope.getSortColumn = function () {
      // it has to be like this, otherwize, the `orderBy sortByColumn`
      // breaks for special names like "South Korea"
      return '"' + $scope.sortByColumn + '"';
    };
    
    $scope.myArray = [
      { "CustomerName": "FORD", "Australia": 0, "China": 2, "India": 0, "South Korea": 0 },
      { "CustomerName": "ICICI PRUDENTIAL", "Australia": 0, "China": 0, "India": 5, "South Korea": 0 },
      { "CustomerName": "Kimberly Clark", "Australia": 0, "China": 0, "India": 0, "South Korea": 1 },
      { "CustomerName": "McDonalds", "Australia": 1, "China": 0, "India": 0, "South Korea": 0 },
      { "CustomerName": "Novartis", "Australia": 1, "China": 0, "India": 0, "South Korea": 0 },
      { "CustomerName": "Origin Energy", "Australia": 3, "China": 0, "India": 0, "South Korea": 0 }
    ];
  });

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

table {
  border-collapse: collapse;
}

td,
th {
  padding: 2px 4px;
}

[ng-click] {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<table ng-controller="myController" border="1">
  <tr>
    <th ng-repeat="(key, val) in myArray[0]" ng-click="sortBy(key)">
      {{ key }}
      <span ng-if="sortByColumn === key">{{ sortByReverse ? '▲' : '▼' }}</span>
    </th>
  </tr>
  <tr ng-repeat="row in myArray | orderBy : getSortColumn() : sortByReverse">
    <td ng-repeat="column in row">
      {{ column }}
    </td>
  </tr>
</table>