Question

我有一个div列表，我想实现以下html示例：

<div class="groups">
  <div class="group">Whatever 1</div>
  <div class="group">Whatever 2</div>
  <div class="group">Whatever 3</div>
</div>
<div class="groups">
  <div class="group">Whatever 4</div>
  <div class="group">Whatever 5</div>
  <div class="group">Whatever 6</div>
</div>

我有以下内容：

<div class="group" ng_repeat="group in groups">
    <div>{{group.name}}</div>
</div>

我如何封装＆＃34; group＆＃34; div＆＃34; groups＆＃34;每三个元素？此外，我想动态添加元素并具有相同的行为。

Answer 1

编辑：使用过滤器无法进行无限循环。这是一个在控制器监视功能中使用过滤逻辑的解决方案。它可以重构并放在服务中。但为了简单起见，这里没有做到。

这是一个有效的Plunker：http://plnkr.co/edit/tINqbztypUqv674hvDbo

我会选择@ Mik378提出的解决方案，在控制器中最初扩充和操作数据：

<div ng-controller="yourCtrl">

    <div class="groups" ng-repeat="groups in groupedArray">
        <div class="group" ng-repeat="group in groups">
            <div>{{group.name}}</div>
        </div>
    </div>
</div>

控制器：

angular.module('yourApp')
    .controller('yourCtrl', function ($scope) {
        $scope.tobeGroupedArray = [
            {name: 'group1'},
            {name: 'group2'},
            {name: 'group3'},
            {name: 'group4'},
            {name: 'group5'},
            {name: 'group6'},
            {name: 'group7'},
            {name: 'group8'},
            {name: 'group9'}
        ];

        $scope.$watch(
            'tobeGroupedArray',
            function (newVal) {
                if (!newVal) {
                    return;
                }
                $scope.groupedArray = [];
                newVal.forEach(function (group, idx) {
                    if (idx % 3 === 0) {
                        $scope.groupedArray.push([]);
                    }
                    $scope.groupedArray[$scope.groupedArray.length - 1].push(group);
                });
            },
            true
        );
    });

Answer 2

我认为你会有一系列的团体，每个团体和＃34;是一个阵列。为什么不以下：

<div class="groups" ng-repeat="groups in groupsArray">
  <div class="group" ng-repeat="group in groups">
      <div>{{group.name}}</div>
  </div>
</div>

Angular.js：每三个元素添加标记

2 个答案: