在 angularjs 中使用 ng-repeat 动态创建表

Question

我想根据来自 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过在另一个内部使用 ng-repeat 来做到这一点。而且，使用第一行来呈现标题。

Note on ngRepeat : For some reason, angularjs@1.4.0 previous versions sorted the keys alphabetically when using ng-repeat by key in object .一个简单的修复方法是升级到 angularjs@^1.4.0 他们修复它的地方。

通过角度文档宣布此更改：

您需要注意，JavaScript 规范并未定义为对象返回的键的顺序。 （为了在 Angular 1.3 中缓解这种情况，ngRepeat 指令用于按字母顺序对键进行排序。）

_1.4 版删除了字母排序。我们现在依赖浏览器在运行 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>

原文由 lenilsondc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

逻辑是通过使用 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 发布，翻译遵循 CC BY-SA 3.0 许可协议