このような構造にng-repeatを適用する方法

Question

アイテムのコレクションを取得し、それらの下に表示されているUIプロパティに表示したいと考えています。私は、受け付けておりますすなわち、

"items": [ 
    { 
     "field1": "value1", 
     "field2": "value2", 
     "id":"ABCDEF1234" 
    }, 
    { 
     "field1": "value1", 
     "field2": "value2", 
     "id":"XYZ12345" 
    } 
] 

をする代わりに、私が通常期待される構造の

：

"items": [ 
    { 
     "ABCDEF1234": { 
     "field1": "value1", 
     "field2": "value2", 
     "id":"ABCDEF1234" 

     } 
    }, 
    { 
     "XYZ12345": { 
     "field1": "value1", 
     "field2": "value2", 
     "id":"XYZ12345" 
     } 
    } 
] 

を問題は、私は、サービスのいずれかから受け付けておりますJSONが問題を引き起こしているということです

通常、私は$ scope.itemsに 'items'を割り当て、次にこのようにng-repeatを使用します：

<div ng-repeat="item in items"> 
     <ul> 
     <li>{{item.id}}</li> 
     <li>Field1 - {{item.field1}}</li> 
     <li></li>Field2 - {{item.field2}}</li> 
     </ul> 
    </div> 

しかし、この場合、各項目は、フィールドの1つとして表示されるのとは別に、オブジェクトのキーとしても使用される動的IDによって表されます。 - VALUE1
フィールド2 - value2の

XYZ12345
フィールド1 - をvalue1
フィールド2 - value2の

ABCDEF1234
フィールド1：どのように私はこのような何かを表示するには、NG-繰り返し使用して、このようなコレクションを反復処理する必要があり

ご協力いただきありがとうございます。

Answer 1

<div ng-repeat="item in items"> 
    <div ng-repeat="(itemKey, itemValue) in item"> 
     <h2>{{ itemKey }}</h2> 
     <ul ng-repeat="(key, value) in itemValue" ng-if="key !== 'id'"> 
      <li>{{ key }} - {{ value }}</li> 
     </ul> 
    </div> 
</div> 

Answer 2

あなたはそれを受け取るときにもっと使いやすいフォーマットにマップすることができます。例えばあなたが大規模なlist.Itは数を作成している場合

items = items.map(item => item.values[0]); 

これは

[ 
    { 
    "field1": "value1", 
    "field2": "value2", 
    "id": "ABCDEF1234" 
    }, 
    { 
    "field1": "value1", 
    "field2": "value2", 
    "id": "XYZ12345" 
    } 
] 

Answer 3

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 

 
    $scope.items = [{ 
 
    "ABCDEF1234": { 
 
     "field1": "value1", 
 
     "field2": "value2", 
 
     "id": "ABCDEF1234" 
 

 
    } 
 
    }, { 
 
    "XYZ12345": { 
 
     "field1": "value1", 
 
     "field2": "value2", 
 
     "id": "XYZ12345" 
 
    } 
 
    }] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <div ng-repeat="item in items"> 
 
    <div ng-repeat="(key, value) in item"> 
 
     {{key}} 
 
     <div ng-repeat="(key, value) in value" ng-if="key!== 'id'"> 
 
     {{key}}-{{value}} 
 
     </div> 
 
     <br/> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

ngのリピートにそれをマップするには、パフォーマンスの問題が発生します子スコープとウォッチャー。ng-repeatの使用を制限する方が良いです。私はあなたのデータをrequiで変更することをお勧めします赤のフォーマットを使用してから、単一のng-repeatを使用します。