Angularjs：自定义网格组件，动态添加 <br> 元素

Question

好的，我已经制作了一个非常简单的网格组件。我获取一个列计数属性并在一行结束后添加一个<br> 标记。我在链接函数中这样做。

她是指令：http://pastebin.com/U4ckuKJw
grid.html 看起来像这样：<div class="grid" data-ng-transclude=""></div>

在我的第一个示例中，我在网格组件中有 7 个<div> 标签，并且希望有 3 列。所以每隔三分之一 <div> 我想添加一个 <br>。

它看起来像这样并且正在工作：
<div data-grid="" data-cols="5">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>

这个不工作：http://pastebin.com/wtcgM2Hv

我认为这是因为指令 ng-repeat 并且网格组件的内容在执行链接功能时没有呈现。

关于如何解决这个问题或如何优化组件有什么想法吗？

Answer 1

好的，现在我找到了解决方案：
use angular directive to change classes of ng-repeat elements

我现在将它与 Marks 的想法混合并操作 css 类。

谢谢

Answer 2

更简单的方法可能是使用标准角度指令和 css 来解决问题。例如，如果您将单元格和 clear: left 浮动到开始新行的单元格上，则可以使用 ng-repeat 和 ng-class 来完成此操作。

我创建了一个示例：http://jsbin.com/idukaz/1

html 看起来像这样。注意我使用ng-class 来应用格式化需要根据调用自定义columnEnd 函数的结果开始新行的单元格的类。 columnBreak 是您想要的列数的范围变量。 $index是ng-repeat生成的变量：

<div class="table">
    <div class="label" 
         ng-class="{'new-row': startNewRow($index, columnBreak) }"
         ng-repeat="item in items">{{ item.name }} ({{ $index + 1 }})</div>
</div>

在您的控制器中：

app.controller('Controller', ['$scope', function (scope) {
    // list of grid data
    scope.items = [];

    // controls the number of columns
    scope.columnBreak = 5;

    // calculates if current cell is start of new row
    scope.startNewRow = function (index, count) {
        return ((index) % count) === 0;
    };
}]);

在您的 CSS 中，如果您浮动单元格并清除左侧，您的列将动态显示 更改 columnBreak 值时重新格式化。

.label {
    float: left;

}

.new-row {
    clear: left;
}