0

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

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

在我的第一个示例中，我<div>在网格组件中有 7 个标签，并且希望有 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 并且在执行链接功能时未呈现网格组件的内容。

关于如何解决这个问题或如何优化组件的任何想法？

4

2 回答 2

0

Ok, now I found the solution:
use angular directive to change classes of ng-repeat elements

I mixed it with Marks idea and manipulate the css classes now.

Thanks

于 2013-07-08T09:59:38.547 回答
0

一种更简单的方法可能是使用标准角度指令和 css 来解决问题。例如，如果您浮动单元格并clear: left在那些开始新行的单元格上，您可以使用ng-repeatandng-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;
}
于 2013-07-04T23:51:29.873 回答