2016-05-24 8 views
0

このリストには、JSON構造からのデータを格納するキー、値構造があり、このデータをng-repeatのテーブルに印刷したいと考えています。AngularJSを使用したキー値構造リストのデータのバインド

var data = [ 
      { 
      id: 1, 
      name : "Peter", 
      lastname : "Smith", 
      age : 36 
      }, { 
      id: 2, 
      name : "Peter", 
      lastname : "Smith", 
      age : 36 
      } 
     ]; 

     $scope.itemDictionary = {}; 
     angular.forEach(data, function(item){ 
      var obj = {}; 
      var valObj = {}; 

      valObj.name = item.name; 
      valObj.lastname = item.lastname; 
      valObj.age = item.age; 

      obj[item.id] = valObj; 
      if(!$scope.itemDictionary[item.id]){ 
       $scope.itemDictionary[item.id] = obj; 
      } 
     }); 

私はそれは、テーブル内NG・リピート=「何かでD」なければならないことを知っているが、私は私が持っている構造に基づいて、これをachiveする方法を知りません。

答えて

1

使用ng-repeat="(key,value) in itemDictionary"

<div ng-app="exampleApp"> 
    <div ng-controller="ExampleController"> 

     {{itemDictionary}} 

     <div ng-repeat="(key,value) in itemDictionary track by key"> 
      <h1>ID: {{key}}</h1> 
      <h1>Name: {{value[$index + 1].name}}</h1> 
      <h1>Lastname: {{value[$index + 1].lastname}}</h1> 
      <h1>Age: {{value[$index + 1].age}}</h1> 
     </div> 

    </div> 
</div> 

例:http://codepen.io/gpincheiraa/pen/vGoqzr

+0

感謝。 – kennechu

+0

@kennechuようこそ。この回答があなたの問題を解決するのに役立った場合、このスレッドへの今後の訪問のための正解とマークしてください。 –

1

私は知らないが、なぜあなたはそんなに不必要なハッシュを使用しています。 jsonデータを任意のスコープ変数に割り当てて、ビューで使用できます。 例 - :

//inside controller... 
var data = [ 
     { 
     id: 1, 
     name : "Peter", 
     lastname : "Smith", 
     age : 36 
     }, { 
     id: 2, 
     name : "Peter", 
     lastname : "Smith", 
     age : 36 
     } 
    ]; 

    $scope.itemDictionary = data; 


//inside view... 

<table> 
<tr id="{{item.id}}" ng-repeat="item in itemDictionary"> 
    <td>{{item.id}}</td> 
    <td>{{item.name}}</td> 
    <td>{{item.lastname}}</td> 
    <td>{{item.age}}</td> 
</tr> 
</table> 

それだ...あなたの時間:)

関連する問題