角度：NGリピート<code>json</code>データは次のように出番私は特定の要件を持っている

テーブルの順序を表示する：私はng-repeatを使用してテーブルにそれを見せたい角度：NGリピート<code>json</code>データは次のように出番私は特定の要件を持っている

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

、しかし途中でヘッダ次のように最初の列に来てください：

<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を使用してこれを達成する方法はありますか？次のように

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

あなたのマークアップは次のようになります。あなたを提供

おかげ

出典

2016-07-14 Marco Almodova

は、コントローラを持っています。データは、それが表示された後に変更するつもりはないされている場合：

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

出典

2016-07-14 03:04:46

あなたは、あなたが以下のように、ビューにネストされたNG-繰り返しを使用することができ、オブジェクトのあなたの配列を変換することができます。

(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>

私はそれが助けてくれることを願っています！

出典

2016-07-14 03:05:35 developer033

角度：NGリピート<code>json</code>データは次のように出番私は特定の要件を持っている

答えて

関連する問題