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

更简单的方法可能是用标准角度指令和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;
}

Answer 2

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

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

由于

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

2 个答案: