AngularJS 指令，将 n 个元素的数组呈现为每个 m 行的表

Question

问题：给定一个"n"项的数组，我希望它们呈现在单独的表中，每个表有 m 行。例如，如果我有一个包含 n=30 个项目和 m=6 的数组，那么我需要 5 个表，每个表有 6 个项目，每个表水平堆叠在一起。

尝试

的解决方案：我尝试使用 ng-repeat 和 ng-switch 来渲染这种效果，但它不起作用。我能够将这些项目呈现为单个表（这很简单）。

我知道下面粘贴的代码不起作用，因为第一个 ng-switch 不会关闭 and 标签。有什么众所周知的技巧可以实现这样的事情吗？

itemapp.directive("items", function () {
    'use strict';
    return {
        restrict: 'E',
        template: '<div id="itemDiv" ng-repeat="item in items" ng-show="$index==0">' +
            '<span ng-switch on="$index % 10">' +
            '   <div ng-switch-when="0">' +
            '           <table><tbody>'+
            '   </div>'+
            '<tr class="itemon">' +
            '<td><input type="radio" ng-model="item.on" value="0" >OFF</input></td>' +
            '<td>{{$index}}</td>'+
            '</tr>' +
            '   <div ng-switch-when="9">' +
            '    </table></tbody>'+
            '   </div>'+
            '</span>' +
            '</div  ng-show="$index==0">',
        link: function (scope) {
        },
        scope: {
            items: '='
        }
    };
});

以下是作为 HTML 模板的代码：

<div id="itemDiv" ng-repeat="item in items" ng-show="$index==0">
 <span ng-switch on="$index % 10">
<div ng-switch-when="0">
    <table>
        <tbody>
</div>
           <tr class="itemon">
               <td><input type="radio" ng-model="item.on" value="0">OFF</input></td>
               <td>{{$index}}</td>
            </tr>
      <div ng-switch-when="9">
          </table></tbody>
      </div>
</span>
</div  ng-show="$index==0">

Answer 1

这是方法，我解决了它：

命令：

<table ng-repeat='t in getIndexes(tableCount) track by $index'>
  <tbody>
    <tr ng-repeat='item in items' ng-if='isVisible($parent.$index,$index)'>
      <td>{{item.name}}</td>
      <td>{{item.city}}</td>
    </tr>
  </tbody>
</table>

getIndexes - 函数，它只是创建数组，因为ng-repeat不能只做简单的重复，只能做智能重复。

isVisible - 函数，它根据源数组中的位置定义相应 tr 的可见性。

指令代码：

app.directive("tconstructor", function () {
    'use strict';
    return {
        restrict: 'AE',
        templateUrl: 'directive.html',
        scope: {
            items: '=',
            perTable: '=' // items per table
        },
        link: function ($scope, $element, attrs) {
              $scope.tableCount = $scope.items.length / $scope.perTable;
              $scope.getIndexes = function(count) {
                return new Array(count);
              },
              $scope.isVisible = function(t,i) {
                console.log(t,i,(t*$scope.perTable <= i), (i < (t+1)*$scope.perTable) );
                return (t*$scope.perTable <= i) && (i < (t+1)*$scope.perTable);
              }
        }
    };
});

索引页：

 <div ng-controller="SimpleController">
  <tconstructor items='items' per-Table='perTable'></tconstructor>
 </div>

实时代码：我已经将 items 数组设置为 8 个元素，每个表计数 = 2，结果是 4 个表，每个表有 2 个 elems。

http://plnkr.co/edit/eUM7UJap3VIYvi0dMMbc?p=preview

应该没有问题，调整代码并实现您的目标。 希望有帮助