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

时间：2016-11-10 10:34:23

标签： html angularjs json

我想根据来自webapi的json对象生成带有动态表头和行/列的动态表。

enter image description here

以下是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>

3 个答案:

答案 0 :(得分：5)

您可以在另一个内部使用ng-repeat来完成此操作。而且，使用第一行来呈现标题。

  

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

     

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

     

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

     

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

     

参考：Iterating over object properties

以下代码段实现了此解决方案。

＆＃13;
＆＃13; 
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']);
});
＆＃13; 
table {
  border-collapse: collapse;
}
td,
th {
  padding: 2px 4px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

示例bellow通过单击列标题动态地对列进行排序，并通过再次单击所选列来实现反向

＆＃13;
＆＃13; 
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']);
});
＆＃13; 
table {
  border-collapse: collapse;
}

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

[ng-click] {
  cursor: pointer;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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>

答案 2 :(得分：-2)

我正在使用角度1.6

dynamic table header and according values.

此处标记的列是动态的，也是其值。 我的桌子结构如下。

<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>
相关问题
最新问题