AngularJS重复动态数组值
[英]AngularJS repeat dynamic array values
问题描述
I have this array: 
我有这个数组：
[
{type:'a', value:'234'},
{type:'a', value:'5566'},
{type:'b', value:'778'},
{type:'c', value:'899'},
{type:'k', value:'5644'}
]
I want to do this iteration: 我想做这个迭代：
<div ng-repeat="obj in array">
<h3 ng-bind="obj.type"></h3>
<span ng-bind="obj.value"></span>
</div>
I want the result to be header for each type without duplicates, and under each type I want the values. 我希望结果是每种类型的标头，没有重复，并且在每种类型下我都想要值。 How can I do it without iterating and creating new arrays? 如何在不迭代和创建新数组的情况下做到这一点？
Desired result: 所需结果：
<div>
<h3>a</h3>
<span>234</span>
<span>234</span>
</div>...
Thanks! 谢谢！
4 个解决方案
解决方案1
2 2016-01-31 20:28:18
The easiest way to achieve the result you are looking for is to use underscore.js _.groupBy http://underscorejs.org/#groupBy . 获得所需结果的最简单方法是使用underscore.js _.groupBy http://underscorejs.org/#groupBy 。 This will require changing the iterators slightly as well. 这将需要稍微更改迭代器。
Using $scope.groups = _.groupBy($scope.array, "type"); 使用$scope.groups = _.groupBy($scope.array, "type"); , we get: ，我们得到：
{
"a": [{
"type": "a",
"value": "234"
}, {
"type": "a",
"value": "5566"
}],
"b": [{
"type": "b",
"value": "778"
}],
"c": [{
"type": "c",
"value": "899"
}],
"k": [{
"type": "k",
"value": "5644"
}]
}
Using ng-repeat , we would not get the exact result expected. 使用ng-repeat ，我们将无法获得预期的确切结果。 However, we can use the (key, value) variation of ng-repeat to achieve the result we are looking for, something like this: 但是，我们可以使用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>
Full Example: 完整示例：
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>
解决方案2
1 2016-01-31 18:11:59
I think this should do the trick. 我认为这应该可以解决问题。
<div ng-repeat="obj in array | unique : 'type'">
<h3 ng-bind="obj.type"></h3>
<span ng-bind="obj.value"></span>
</div>
Check it out and see if it works. 检查一下，看看是否可行。
Edit : You would need the angular.filter module for this 编辑：您将需要此的angular.filter模块
Update: 更新：
Looking at the updated question, I think it might be difficult for you to achieve the operation given(using a single iteration to list out all the values by unique type). 查看更新后的问题，我认为您可能难以实现给定的操作（使用一次迭代按唯一类型列出所有值）。
But you can do one thing, group the array by type using this pure JS function(similar to @Claies answer): 但是您可以做一件事，使用此纯JS函数按类型对数组进行分组（类似于@Claies答案）：
var custom_sort = function(arr){
var a = arr.slice(0);
var ret = [];
var same_type = false;
while (a.length != 0){
var item = a.shift();
if(ret.length > 0){
for(var i = 0; i < ret.length; i++){
if(ret[i].type == item.type){
ret[i].value.push(item.value);
same_type = true;
}
}
}
if(!same_type){
ret.push({type : item.type, value : [item.value]});
}
same_type = false;
}
return ret;
}
The output array that you will get is like this: 您将获得的输出数组如下所示：
[
{ type: 'a', value: [ '234', '5566' ] },
{ type: 'b', value: [ '778' ] },
{ type: 'c', value: [ '899' ] },
{ type: 'k', value: [ '5644' ] }
]
And from there, do the iteration like this: 然后从那里进行如下迭代：
<div ng-repeat="obj in array">
<h3 ng-bind="obj.type"></h3>
<div ng-repeat="v in obj.value">
<span ng-bind="v"></span>
</div>
</div>
Hope it helps. 希望能帮助到你。
解决方案3
0 2016-01-31 18:24:04
You need angular-filter . 您需要angular-filter 。
You can do like this 你可以这样
<div ng-repeat="obj in array | unique:'type' ">
<h3 ng-bind="obj.type"></h3>
<span ng-bind="obj.name"></span>
</div>
Define your app module like this. 像这样定义您的应用模块。
var app = angular.module('app', ['angular.filter']);
I have used angular-filter.min.js 我用过angular-filter.min.js
解决方案4
0 2016-01-31 19:38:26
I think you have to do some coding for it in your controller to provide a filtered dataSet to ngRepeat. 我认为您必须在控制器中对其进行一些编码，才能将过滤后的dataSet提供给ngRepeat。
var dataSet = [
{type:'a', value:'234'},
{type:'a', value:'5566'},
{type:'b', value:'778'},
{type:'c', value:'899'},
{type:'k', value:'5644'}
];
var filteredDataSet = new Array();
dataSet.forEach(function(dataObj){
var tempObject = {};
tempObject.type = dataObj.type;
tempObject.value = new Array(dataObj.value);
var duplicate_key = false;
if (filteredDataSet.length){
filteredDataSet.forEach(function(iObj){
// Push value into a value array of filteredDataSet
// and make the flag duplicate_key value to true to
// prevent the insertion of duplicate object into a
// filteredDataSet array.
if (dataObj.type == iObj.type){
iObj.value.push(dataObj.value);
duplicate_key = true;
}
});
}
// Push non duplicate object by key into a filteredDataSet array
if (duplicate_key == false){
filteredDataSet.push(tempObject);
}
});
$scope.dataSet = filteredDataSet;
And here is your HTML 这是您的HTML
<div ng-repeat="dataObj in dataSet">
<h1>{{dataObj.type}}</h1>
<div ng-repeat="val in dataObj.value">
<h3>{{val}}</h3>
</div>
</div>
I hope it solve your problem, modification into this code will be highly appreciated thanks. 希望它能解决您的问题，对此代码进行的修改将不胜感激。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.