Question

我使用Angular和Bootstrap来表示数据网格，并为用户提供一些控制（编辑数据等）。数据集是对象数组，每个对象都有一个group属性，该属性不是唯一的，表示记录引用的组。

因此，数据集看起来像

[
  {
    id: 1,
    group: 'A',
    value: 'John'
  }, {
    id: 2,
    group: 'A',
    value: 'Jake'
  }, {
    id: 3,
    group: 'B',
    value: 'Jack'
  }
]

我希望Angular输出

<div class="row group">
  <div class="col-md-12">A</div>
</div>
<div class="row sample">
  <div class="col-md-4">1</div>
  <div class="col-md-8">John
<div>
...

我尝试了ng-repeat，但它只允许将数组相互折叠，因此{{ group }}将成为顶级元素，{{ elementOfAGroup }}将成为其子元素。我需要一个最终标记作为一组简单的DOM元素。

我搜索了一个解决方案，但我发现的唯一一个是简单的组件（指令），可以组成表格。

Answer 1

我使用自定义“uniq”过滤器来完成此任务：

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.1.1/angular-filter.js"></script>
    </head>
    <body ng-app="plunker" ng-controller="MainCtrl">
        <div class="row group" ng-repeat="data in dataset | uniq: 'group'">
            <h3>{{data.group}}</h3>
            <div class="col-md-12" ng-repeat="child in dataset | filter: { group: data.group }">{{child.value}}</div>
        </div>
    </body>
    <script>
        var app = angular.module('plunker', ['angular.filter']);

        app.controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) {
            $scope.dataset = [
                {
                    id: 1,
                    group: 'A',
                    value: 'John'
                }, {
                    id: 2,
                    group: 'A',
                    value: 'Jake'
                }, {
                    id: 3,
                    group: 'B',
                    value: 'Jack'
                }
            ];

        }]);
    </script>
</html>

大数据集可能会很慢。

使用Angular在一维列表中对数据进行分组

1 个答案: