Question

使用以下内容：

<div class="row" ng-repeat="(k, v) in idata">
    <div class="col-lg-6">
        <h2>Network Bytes: {{k}}</h2>
        <div class="chart" ts-rickshaw="v"></div>
    </div>
</div>

有没有办法可以在每个X项中插入一行（在这种情况下为2，因为它是col-lg-6）？我知道我可能会将我的数据更改为数组并在控制器中执行一些逻辑。但理想情况下应该有一种方法可以将视图逻辑保持在控制器之外。

Answer 1

我选择了@Skelly建议的ng-switch策略。但是我修改它以使其更通用，因此我可以通过添加嵌套循环并引用$parent.$index来避免每列的代码重复：

<div ng-repeat="i in fsdata track by $index" ng-init="rows = [1,2]">
    <span ng-switch="" on="$index % rows.length">
        <div class="row" ng-switch-when="0">
            <div class="col-lg-{{12/rows.length}}" ng-show="fsdata[$parent.$index+$index]" ng-repeat="i in rows">
                <h2>Disk: {{fsdata[$parent.$index+$index].name}} <small>({{fs_current[$parent.$index+$index].c_val | bytes}} / {{fs_current[$parent.$index+$index].total | bytes}}) {{fs_current[$parent.$index+$index].percent_used|number:0}}% Used</small></h2>
                <div class="chart" max="{{fs_total[fsdata[$parent.$index+$index].name]}}" ts-rickshaw="fsdata[$parent.$index+$index].data"></div>
            </div>
        </div>
    </span>
</div>

Answer 2

使用$ index和模数运算符怎么样？

<div class="row" ng-repeat="(k, v) in idata">
    <div class="col-lg-6">
        <h2>Network Bytes: {{k}}</h2>
        <div class="chart" ts-rickshaw="v"></div>
    </div>
    <div ng-if="($index != 0) && ($index % 2)">My Even Row</div>
</div>

具有ng-repeat和bootstrap的动态列长度

2 个答案: