Question

我有一种情况，我想创建一个指令，它接受一个项目数组并将它们分成可变数量的列，用包含这些列的元素包装它们。在花了几个小时尝试各种各样的事情后，我很难过如何设计这个。以下是我想要使用此指令的方法：

<columnize columnCount="3" collection="items">
   <div>{{item.Name}}</div> <!-- this is the repeated part -->
</columnize>

该指令将接收两个输入，columnCount和collection。该指令在内部获取集合并将其拆分为具有所需列数的嵌套数组，每个列都包含该列的项目。结果数组将显示如下：

$scope.columns = [
   [{Name: "Item1"}, {Name: "Item2"}, {Name: "Item3"}],
   [{Name: "Item4"}, {Name: "Item5"}, {Name: "Item6"}],
   [{Name: "Item7"}, {Name: "Item8"}]
];

然后我想使用类似于此的模板输出列块：

<div class="row-fluid">
    <div class="column" ng-repeat="column in columns">
        <span ng-repeat="item in column">
            <span ng-transclude></span>
        </span>
    </div>
</div>

这个问题是，由于在ngRepeat中重复，我似乎无法进行翻译工作。我猜我需要克隆内容并以某种方式手动插入到这个模板中，但我似乎无法找到任何好的例子。我发现这看起来像我想做的，只是没有嵌套的中继器：

http://liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/

我希望有一种比这更简单的方法。我有什么想法可以做到这一点吗？

Answer 1

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

我就是这样做的。请记住，您肯定需要CSS来设置列布局样式。

app.directive('columnize', function() {
  return {
    restrict: 'E',
    scope: {
      collection: '=',
      columnCount: '='
    },
    transclude: true,
    template: '<div><div class="column" ng-repeat="col in cols">' + 
      '<div ng-repeat="item in col" ng-transclude></div>' +
      '</div></div>',
    link: function( scope ) {
      var partition = function partition( size, items ) {
        if ( items.length === 0 ) { return []; }
        return ([items.slice( 0, size )]).concat( partition( size, items.slice( size )));
      };
      var columnize = function() {
        if ( !scope.columnCount ) { return; }
        scope.cols = partition( scope.columnCount, scope.collection );
      };
      scope.$watch('columnCount', columnize );
      scope.$watch('collection', columnize );
    }
  };
});

AngularJS：创建一个重复转换模板的指令

1 个答案: