CODEWITHSUNDEEP
angularjs
MaZZie
MaZZie

Reputation: 15

angularjs stop at last item ng-repeat

I'm building an app with AngularJS. Inside this app I would like to have 2 buttons on each row, except when the total buttons are not even. How can I let the code stop creating the last col?

With the next code the 6th button (on a array with 5 items) is empty. I don't want this one on the screen.

<div ng-repeat="tool in tools">
  <div class="row" ng-if="$even">
    <div class="col" ng-repeat="tool in [tools[$index],tools[$index + 1]]">
      <button class="button button-block button-{{tool.color}}">
        <i class="icon {{tool.icon}}"></i>
        <br>{{tool.name}}
        </button>
    </div>
  </div>
</div>

Upvotes: 0

Views: 257

Answers (1)

Andr&#233; Werlang
Andr&#233; Werlang

Reputation: 5944

Switch the inner ng-repeat to use limitTo filter;

<div ng-repeat="tool in tools">
  <div class="row" ng-if="$even">
    <div class="col" ng-repeat="tool in tools | limitTo:2:$index">
      <button class="button button-block button-{{tool.color}}">
        <i class="icon {{tool.icon}}"></i>
        <br>{{tool.name}}
        </button>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions