Angular+Bootstrap Column Filter

Adds Bootstrap 12 columns grid classes to the selector in ng-repeat directive

Demo

 AngularJS           Bootstrap

Javascript:

'use strict';
angular.module('MyApp', [])

/**
 * Returns string containing Bootstrap grid class.
 * @param {Object} items - List of array object.
 * @param {Number} colNum - List of equal columns in a row.
 * @param {String} index - Clears the float.
 * @return {String} - Bootstrap grid class ie. .col-md-2|3|4|6|12
 */
.filter('columns', function () {
  return function (items, colNum, index) {
    var cssClass = '',
        itemsCount = Object.keys(items).length;

    if (colNum > 1 && colNum < 13) {
      if (itemsCount < colNum) {
        if (itemsCount === 5) {
          cssClass = ' col-md-2';
        } else {
          var eqCol = 12;
          switch (itemsCount) {
            case 2: eqCol = 6; break;
            case 3: eqCol = 4; break;
            case 4: eqCol = 3; break;
          }
          cssClass = ' col-md-' + eqCol;
          if (index && index % itemsCount === 0) {
            cssClass += ' clearfix ';
          }
        }
      }
      else {
        var col = 12/colNum;
        if (col.toString().indexOf('.') != 1) {
          cssClass = ' col-md-' + col;
          if (index && index % colNum === 0) {
            cssClass += ' clearfix ';
          }
        }
      }
    }
    return cssClass;
  };
});

Improved filter:

/**
 * Returns string containing Bootstrap grid class.
 * @param {Object} items - List of array object.
 * @param {Number} userColumn - List of equal columns in a row to be shown on page.
 * @param {String} cssClassPrefix - Grid class prefix.
 * @param {String} - Clears the float.
 * @return {String} - Bootstrap grid class ie. .col-md-1|2|3|4|6|12
 */
.filter('columns', function () {
  return function (items, userColumn, cssClassPrefix, index) {
    var max = 12,
        min = 1,
        half = Math.ceil(max / 2),
        classPrefix = cssClassPrefix || 'col-md-',
        classClearfix = 'clearfix',
        itemsCount = Object.keys(items).length,
        cssClass = '';
      
    if (userColumn === undefined){
      cssClass = classPrefix + (max / 4);
    } else if (userColumn <= 1) {
      cssClass = classPrefix + max;
    } else {
      //if (half.toString().indexOf('.') != 1) {
      cssClass = classPrefix + Math.ceil(max / userColumn);
      if (index && index % userColumn === 0) {
        cssClass += ' clearfix ';
      }
      //}
    }
    return cssClass;
  };
});

Markup:

<div ng-repeat="item in items" class="{{items | columns:6}}">
  {{item.name}}
</div>

If you want the last container to be on next line, use $index filter param as follows:

<div ng-repeat="item in items" class="{{items | columns:6:$index}}">
  {{item.name}}
</div>

Improved markup:

<div ng-repeat="item in items" class="{{items | columns:6:'col-md-':$index}}">
  {{item.name}}
</div>

Demo

Want to improve this? Fork it at https://github.com/amolnw2778/angular-bootstrap-column-filter

You might also like

AngularJS learning and examples:
jQuery plugins:
WordPress plugins and solutions: