我有这个数组:
[
{type:'a', value:'234'},
{type:'a', value:'5566'},
{type:'b', value:'778'},
{type:'c', value:'899'},
{type:'k', value:'5644'}
]
我想做这个迭代:
<div ng-repeat="obj in array">
<h3 ng-bind="obj.type"></h3>
<span ng-bind="obj.value"></span>
</div>
我希望结果是每种类型的标题而不重复，并且在每种类型下我想要值。 如何在不迭代和创建新数组的情况下做到这一点？
期望的结果:
<div>
<h3>a</h3>
<span>234</span>
<span>234</span>
</div>...
谢谢!
最佳答案
实现您正在寻找的结果的最简单方法是使用 underscore.js _.groupBy http://underscorejs.org/#groupBy 。这也需要稍微更改迭代器。
使用$scope.groups = _.groupBy($scope.array, "type");，我们得到:
{
"a": [{
"type": "a",
"value": "234"
}, {
"type": "a",
"value": "5566"
}],
"b": [{
"type": "b",
"value": "778"
}],
"c": [{
"type": "c",
"value": "899"
}],
"k": [{
"type": "k",
"value": "5644"
}]
}
使用ng-repeat，我们不会得到预期的确切结果。但是，我们可以使用 ng-repeat 的 (key, value) 变体来实现我们正在寻找的结果，如下所示:
<div ng-repeat="(type, values) in groups">
<h3 ng-bind="type"></h3>
<span ng-repeat="v in values">
<span ng-bind="v.value"></span>
</span>
</div>
完整示例:
var app = angular.module('stackExample', []);
app.controller('MainCtrl', function($scope) {
$scope.array = [{
type: 'a',
value: '234'
}, {
type: 'a',
value: '5566'
}, {
type: 'b',
value: '778'
}, {
type: 'c',
value: '899'
}, {
type: 'k',
value: '5644'
}];
$scope.groups = _.groupBy($scope.array, "type");
console.log($scope.groups);
});<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script data-require="underscore.js@1.8.3" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<html ng-app="stackExample">
<body ng-controller="MainCtrl">
<div ng-repeat="(type, values) in groups">
<h3 ng-bind="type"></h3>
<span ng-repeat="v in values">
<span ng-bind="v.value"></span>
</span>
</div>
</body>
</html>关于javascript - AngularJS 重复动态数组值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35117306/