Question

我有一系列具有属性的对象，其中一些对象在名为＆＃34; region＆＃34;的属性中具有相同的值。我想按区域属性对这些对象进行分组（即，如果它们在同一区域中，然后将它们组合在一起），并在不同的表中显示来自这些对象的许多区域。我无法弄清楚如何在ng-repeat中执行此操作。以下是对象列表的示例：

[{"name": 000, "region": cus, "weight": 1}, {"name": 001, "region": cus, "weight": 2}, {"name": 003, "region": wus, "weight": 2}]

目标是对表格标签进行ng-repeat，以便表格由区域＆＃34; cus＆＃34;生成。和＆＃34; wus，＆＃34;两个表在cus表中有000和001，在wus表中有002。

由于我不在这里解释的原因，我宁愿不使用AngularJS的另一个库来实现这个期望的结果。你们中的许多人提出了一个可以添加的groupBy属性，但是有没有办法只使用原生的Angular代码呢？

非常感谢你的帮助。

Answer 1

＆＃13;

angular.module('app',['angular.filter'])

function Main($scope) {
	var a = [{"name": 000, "region": 'cus', "weight": 1}, {"name": 001, "region": 'cus', "weight": 2}, {"name": 003, "region": 'wus', "weight": 2}]
    $scope.a = a;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<body ng-app="app" ng-controller="Main">
	<div ng-repeat="(key, value) in (a | groupBy: 'region')">
		Group name: {{ key }}
		<table>
			<tr>
				<th>name</td>
				<th>weight</td>
			</tr>
			<tr ng-repeat="item in value">
				<td>{{item.name}}</td>
				<td>{{item.weight}}</td>
			</tr>
		</table>
	</div>
</body>

＆＃13;

修改：我使用filter | groupBy代替lodash。

Answer 2

您需要转换初始数组创建它的分组版本。这很容易做到。例如：

$scope.regions = [{"name": "000", "region": "cus", "weight": 1}, {"name": "001", "region": "cus", "weight": 2}, {"name": "003", "region": "wus", "weight": 2}];

$scope.groupedRegions = $scope.regions.reduce(function(prev, curr) {
    if (!prev[curr.region]) prev[curr.region] = [];
    prev[curr.region].push(curr);
    return prev;
}, {});

然后呈现它：

<table ng-repeat="(key, value) in groupedRegions" class="table table-bordered">
    <tbody>
        <tr>
            <td>{{key}}</td>
            <td>
                <table>
                    <tbody>
                        <tr ng-repeat="region in value">
                            <td>{{region.name}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

演示： http://plnkr.co/edit/JqJMjETsKeN2TIeczW5u?p=preview

ngRepeat将相同的属性与另一个库

2 个答案: