How to insert new line within ng-repeat of the middle (Angularjs + twitter bootstrap + jade)

Question

How to insert new line within ng-repeat of the middle (Angularjs + twitter bootstrap + jade)

I want to insert new line like a following.

div.row
  div.span12
    div(ng-repeat="(data in datas)")
      p data.text

      // insert new line when $index is the number divisible by 3.

how does it do?

thank you.

javascript
node.js
twitter-bootstrap

Answer 1

You can use the ng-if directive, you would show a line break every time your $index matches a certain condition. So if you'd like to break after 3 iterations:

<div ng-repeat="data in datas">
    {{ data }}
    <br ng-if="($index+1)%3==0">
<div>

Answer 2

I am not sure what your end result will be, but there are a few ways that I would approach this. The first is to use ng-hide and ng-show to do something different on items that are divisible by 3. The other way would be to use ng-class to just style the 3rd element differently.

<div ng-repeat="data in datas">
    <div ng-class="{'red': ($index+1)%3==0}">{{data}}</div>
<div>

Here is a jsFiddle