ng-repeat =「（key，value）in arr中的項目」？

Question

顯然，上面是在AngularJs語法無效的，然而，無論是item in array也不(key, value) in item會自己做的伎倆。有沒有辦法將兩者結合成一個單一的聲明（如上所述）或其他方式來做到這一點？

我有鍵/值對的地圖看起來像這樣：

$this.colorsHash = { 
    '05/04/2015': { sum: 540, color: 'rgb(176,145,219)' }, 
    '05/10/2015': { sum: 379, color: 'rgb(161,111,107)' }, 
    '05/13/2015': { sum: 429, color: 'rgb(173,138,118)' }, 
    '05/19/2015': { sum: 478, color: 'rgb(209,108,161)' }, 
    '05/15/2015': { sum: 596, color: 'rgb(200,200,196)' }, 
    '05/18/2015': { sum: 337, color: 'rgb(102,114,121)' } 
} 

我使用此圖以生成一個傳說，但是，這個傳說可能有20+的價值觀，所以我想突破它被分成相同大小的塊並且並排顯示它們。我已經想出了這部分。它創建n個陣列的具有相同長度的陣列，像這樣：

$this.splitArr = [ 
    [ 
    { '05/04/2015': { sum: 540, color: 'rgb(176,145,219)' } }, 
    { '05/10/2015': { sum: 379, color: 'rgb(161,111,107)' } }, 
    { '05/13/2015': { sum: 429, color: 'rgb(173,138,118)' } } 
    ], 
    [ 
    { '05/19/2015': { sum: 478, color: 'rgb(209,108,161)' } }, 
    { '05/15/2015': { sum: 596, color: 'rgb(200,200,196)' } }, 
    { '05/18/2015': { sum: 337, color: 'rgb(102,114,121)' } } 
    ] 
] 

我的問題是如何使用納克重複在每個鍵/值對的時候它嵌套陣列內。這裏是我使用的代碼，它讓我獲得每個對象，但是我不知道如何訪問該對象的鍵/值。

<ul style="list-style: none;" ng-repeat="item in Main.splitArr"> 
    <li ng-repeat="obj in item"> 
     <div style="height: 20px; width: 20px; 
      background-color: {{/*I need the object's value.color here*/}}; 
      display: inline-block;"></div> = 
     <span ng-bind="/*I need the object's key here*/"></span> 
    </li> 
</ul> 

Answer 1

解決方法是稍微修改我的splitArr結構。而不是使它成爲Array<Array<Object>>，我將它設爲Array<Object>。這樣一來，我可以保持相同的分組，但它也讓我由一個ng-repeat="(key, value) in obj"使用ng-repeat="obj in arr"其次，像這樣：

angular.module("myApp", []) 
 
.controller("myCtrl", function() { 
 
    var $this = this; 
 
    $this.splitArr = [ 
 
    { 
 
     '05/04/2015': { sum: 540, color: 'rgb(176,145,219)' }, 
 
     '05/10/2015': { sum: 379, color: 'rgb(161,111,107)' }, 
 
     '05/13/2015': { sum: 429, color: 'rgb(173,138,118)' } 
 
    }, 
 
    { 
 
     '05/19/2015': { sum: 478, color: 'rgb(209,108,161)' }, 
 
     '05/15/2015': { sum: 596, color: 'rgb(200,200,196)' }, 
 
     '05/18/2015': { sum: 337, color: 'rgb(102,114,121)' } 
 
    } 
 
    ]; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl as Main"> 
 
<ul style="list-style: none; display: inline-block;" ng-repeat="item in Main.splitArr"> 
 
    <li ng-repeat="(key, value) in item"> 
 
     <div style="height: 20px; width: 20px; 
 
      background-color: {{value.color}}; 
 
      display: inline-block;"></div> = 
 
     <span ng-bind="key"></span> 
 
    </li> 
 
</ul> 
 
</div>

Answer 2

對象語法在ng-repeat docs

記錄嘗試

ng-repeat="(key, value) in arr" 

Answer 3

<ul style="list-style: none;" ng-repeat="item in splitArr"> 
<li ng-repeat="(key,value) in filterSecId(item)"> 
    <div style="height: 20px; width: 20px; 
     background-color: {{value.color.color}}; 
     display: inline-block;"></div> = {{value.keyt}} 
</li> 

更新你這個網站，並在控制器中添加此

$scope.filterSecId = function(items) { 
var result = {}; 
angular.forEach(items, function(value, key) { 
    var val={ 
    "color":value[Object.keys(value)[0]], 
    "keyt":Object.keys(value)[0] 
    }; 
    result[key] = val; 
}); 
return result; 
}}); 

我對此做了一些改變。 Ingnore缺乏最佳實踐。希望它會滿足您的要求。謝謝