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缺乏最佳实践。希望它会满足您的要求。谢谢