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

Posted 2023-03-05

【中文标题】在 angularjs 中使用 ng-repeat 创建动态表

【英文标题】：Dynamic table creation with ng-repeat in angularjs

【发布时间】：2017-03-24 08:27:15

【问题描述】：

我想根据来自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>

【问题讨论】：

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

在哪里？ , 你试过的代码

什么是dataconfigureListData？

$scope.dataconfigureListData.previewData=data.ResponseData;它存储来自 web api 的数据

Ans dataconfigureListData.previewData | json 打印什么？

【参考方案1】：

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

注意ngRepeat：出于某种原因，angularjs@1.4.0 以前的版本在使用ng-repeat by key in object 时按字母顺序对键进行排序。一个简单的解决方法是升级到angularjs@^1.4.0，这是他们修复它的地方。

Angular 文档宣布此更改：

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

1.4 版删除了字母排序。我们现在依赖于在 myObj 中运行 for key 时浏览器返回的顺序。似乎浏览器通常遵循按定义顺序提供密钥的策略，尽管删除和恢复密钥时也有例外。见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#Cross-browser_issues

参考：Iterating over object properties

下面的sn-p实现了这个方案。

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>

【讨论】：

ng-repeat 中动态数据的完美示例。非常感谢。 :-)

@Lenilson de Castro 我已经按照你的解释使用过，然后我得到了表格，但列是按字母顺序排列的。如果我们为我查看答案，则列顺序为Australia, China, CustomerName, India, South Korea

@charantej “列按字母顺序排列”是什么意思？该模型假设对象的数量是一致的，即数组中的所有对象必须具有相同的结构和顺序。 CustomerName: string, Australia: number, China: number, India: number, South Korea: number .

@LenilsondeCastro 对我来说，如果我通过相同的数组表头按此顺序排列Australia, China, CustomerName, India, South Korea

@charantej 改用ng-model="myArray[(__default__currentPage-1)*ItemsPerPageCount + $parent.$index][key]"。另外，您之前提出的问题与我的回答无关，这是一个不同的技术和不同的问题，如果您对其他问题和技术有更多疑问，请提出一个新问题，因为这个问题不再相关了。

【参考方案2】：

我正在使用角度 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>

【讨论】：

在您的示例中， item.doctorName 和 item.target 是固定键值，但在我的情况下，该值也是动态的

@Dixit 在我的示例中我放置并说明了我为动态列生成所做的工作。如果您需要不同的东西，请跳过它。但是我的代码可以正常工作。你发现我的代码有什么错误吗？

我明确提到我想根据来自webapi的JSON对象生成具有动态表头和行/列的动态表。但是您没有为动态表头和行/列提供正确的解决方案。

在我的帖子中，“brand.name”是动态表头，“brand.target”是动态的。

【参考方案3】：

逻辑是通过使用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>