首页 文章

在arr中的项目中，ng-repeat =“（键，值）”？

提问于
浏览 次
-4

但是， Obviously the above is syntactically invalid in 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>
javascript angularjs angularjs-ng-repeat

3 回答

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

    回复于
  • 0

    对象语法记录在ng-repeat docs中

    尝试

    ng-repeat="(key, value) in arr"
    回复于
  • 1

    对此的解决方案是略微修改我的 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>
    回复于

相关问题