Angular：ng-repeat 在表格中显示顺序答案

【问题标题】：Angular: ng-repeat displaying order in a tableAngular：ng-repeat 在表格中显示顺序
【发布时间】：2016-07-14 02:51:28
【问题描述】：

我有一个特定的要求，json 数据是这样的：

[{Id : "a", Name : "John", age : 50},
{Id : "b", Name : "Bob", age : 40}]

我想使用ng-repeat 在表格中显示它，但标题位于第一列，如下所示：

<table>
  <tr>
    <td>Id</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>John</td>
    <td>Bob</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>50</td>
    <td>40</td>
  </tr>
</table>

有没有办法使用angularjs 来实现这一点？

谢谢

【问题讨论】：

标签： angularjs json ng-repeat

【解决方案1】：

如果你有一个控制器：

angular.module('MyApp', [])
.controller('MyController', function($scope) {
    $scope.data =  [
        {Id : "a", Name : "John", age : 50}, 
        {Id : "b", Name : "Bob", age : 40}
    ];
});

您的标记将如下所示。如果数据显示后不发生变化：

<table>
    <tr>
        <td>Id</td>
        <td ng-repeat="item in ::data">{{::item.Id}}</td>
    </tr>
    <tr>
        <td>Name</td>
        <td ng-repeat="item in ::data">{{::item.Name}}</td>
    </tr>
    <tr>
        <td>Age</td>
        <td ng-repeat="item in ::data">{{::item.age}}</td>
    </tr>
</table>

如果数据在显示后会发生变化，并且您希望视图相应地更新，那么：

<table>
    <tr>
        <td>Id</td>
        <td ng-repeat="item in data track by $index">{{item.Id}}</td>
    </tr>
    <tr>
        <td>Name</td>
        <td ng-repeat="item in data track by $index">{{item.Name}}</td>
    </tr>
    <tr>
        <td>Age</td>
        <td ng-repeat="item in data track by $index">{{item.age}}</td>
    </tr>
</table>

【讨论】：

【解决方案2】：

您可以将数组转换为对象，然后可以在视图中使用嵌套的 ng-repeats，如下所示：

(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      var array = [  
         {  
            "Id":"a",
            "Name":"John",
            "age":50
         },
         {  
            "Id":"b",
            "Name":"Bob",
            "age":40
         }
      ];
      
      // If you're sure that the properties are always these:
      $scope.mainObj = {
        "Id": [],
        "Name": [],
        "age": []
      };
     
      // If you're unsure what are the properties:
      /*
      $scope.mainObj = {};
      Object.keys(array[0]).forEach(function(value) {
        $scope.mainObj[value] = [];
      });
      */

      // Iterates over its properties and fills the arrays
      Object.keys($scope.mainObj).forEach(function(key) {
        array.map(function(value) {
          $scope.mainObj[key].push(value[key]);
        })
      });
    });
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <table>
    <tr ng-repeat="(key, values) in mainObj track by $index">
      <td ng-bind="key"></td>
      <td ng-repeat="value in values track by $index" ng-bind="value"></td>
    </tr>
  </table>
</body>

</html>

希望对你有帮助！

【讨论】：