CODEWITHSUNDEEP
angularjstwitter-bootstrap
Kyle Brandt
Kyle Brandt

Reputation: 28377

Dynamic column lengths with ng-repeat and bootstrap

With something like the following:

<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>

Is there a way I could insert a row every X items (2 in this case since it is col-lg-6)? I'm aware I could probably change my data to be an array and do some logic in the controller. But ideally there should be a way to do this that keeps the view logic out of the controller.

Upvotes: 2

Views: 2293

Answers (2)

Kyle Brandt
Kyle Brandt

Reputation: 28377

I went with the ng-switch strategy suggested by @Skelly. However I modified it to make it more generic so I could avoid the code repetition for each column by adding a nested loop and referencing $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>

Upvotes: 1

koolunix
koolunix

Reputation: 1995

What about using $index and the modulus operator?

<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>

Upvotes: 0

Related Questions