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

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. A simple way to fix that is upgrading to angularjs@^1.4.0 which is where they fixed it.

Announce of this change by angular docs:

You need to be aware that the JavaScript specification does not define the order of keys returned for an object. (To mitigate this in Angular 1.3 the ngRepeat directive used to sort the keys alphabetically.)

Version 1.4 removed the alphabetic sorting. We now rely on the order returned by the browser when running for key in myObj. It seems that browsers generally follow the strategy of providing keys in the order in which they were defined, although there are exceptions when keys are deleted and reinstated. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#Cross-browser_issues

Ref.: Iterating over object properties

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

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>