Angular ng-repeat add bootstrap row every 3 or 4 cols

by

The top voted answer, while effective, is not what I would consider to be the angular way, nor is it using bootstrap’s own classes that are meant to deal with this situation. As @claies mentioned, the .clearfix class is meant for situations such as these. In my opinion, the cleanest implementation is as follows:

<div class="row">
    <div ng-repeat="product in products">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4">
            <h2>{{product.title}}</h2>
        </div>
    </div>
</div>

This structure avoids messy indexing of the products array, allows for clean dot notation, and makes use of the clearfix class for its intended purpose.

More Related Contents:

  1. Angular ng-repeat conditional wrap items in element (group items in ng-repeat)
  2. How to iterate over the keys and values with ng-repeat in AngularJS?
  3. Angular ng-repeat Error “Duplicates in a repeater are not allowed.”
  4. How to make ng-repeat filter out duplicate results
  5. ng-repeat :filter by single field
  6. AngularJS For Loop with Numbers & Ranges
  7. Adding parameter to ng-click function inside ng-repeat doesn’t seem to work
  8. passing 2 $index values within nested ng-repeat
  9. Preserve line breaks in angularjs
  10. How to use ng-repeat for dictionaries in AngularJs?
  11. Using Bootstrap for Angular and Material design for Angular together
  12. Directive isolate scope with ng-repeat scope in AngularJS
  13. AngularJS : Custom filters and ng-repeat
  14. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  15. Ng-click doesn’t work inside ng-repeat
  16. AngularJS – How can I reference the property name within an ng-Repeat
  17. When not to use ‘track by $index’ in an AngularJS ng-repeat?
  18. bootsrap nav-bar collapsable cannot make it work
  19. Using comma as list separator with AngularJS
  20. AngularJs Remove duplicate elements in ng-repeat
  21. Using ng-repeat to generate select options (with Demo)
  22. Using ng-if as a switch inside ng-repeat?
  23. What is `priority` of ng-repeat directive can you change it?
  24. AngularJS – Filter empty objects
  25. shuffle array in ng-repeat angular
  26. Filtering an Angular 1.2 ng-repeat with “track by” by a boolean property
  27. How to highlight a selected row in ngRepeat?
  28. ng-repeat specify a starting index
  29. How to obtain previous item in ng-repeat?
  30. Angular ng-click event delegation

Leave a Comment