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)' } } 
  ] 
]

我的问题是如何在每个键/值对嵌套在数组中时使用ng-repeat。这是我正在使用的代码，它为我提供了每个对象，但我不知道如何从该对象访问键/值。

<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

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

使用此更新html并将其添加到控制器中

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

Answer 2

ng-repeat docs

中记录了对象语法

尝试

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

Answer 3

解决方案是稍微修改我的splitArr结构。我将其设为Array<Array<Object>>，而不是将其设为Array<Object>。这样，我可以保持相同的分组，但它也允许我使用ng-repeat="obj in arr"后跟ng-repeat="(key, value) in obj"，如下所示：

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>

在arr＆＃34;中的项目中的ng-repeat =＆＃34;（键，值）

3 个答案: