using row and column in angularjs

Question


  
    {{$index+1}}

I want to have 4 item in a row but I have problem with my ng-class logic.

Jhecht · Accepted Answer

What I would recommend personally is the usage of a set of tools called Angular Filter. It's a dependency that you inject into your modules that does so much to assist with certain things, much like your problem here. The one I used is called "chunkBy," which you can read about at that link.

I have set up This Plunkr as a demo, but the code is here

angular.module('app', ['angular.filter']).controller('mainCtrl', function($scope) {
  $scope.myJson = ["mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9"];
})






  
    
      {{item}}

Edit

If you just would like to use the code needed for chunkBy, I have extracted that. Credit still goes to a8m (which may be a good thing to include his copyright in the top of the file if you end up using it)

/**
 * Bunch of useful filters for angularJS(with no external dependencies!)
 * @version v0.5.14 - 2016-12-06 * @link https://github.com/a8m/angular-filter
 * @author Ariel Mashraki 
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */
var isDefined = angular.isDefined,
  isUndefined = angular.isUndefined,
  isFunction = angular.isFunction,
  isString = angular.isString,
  isNumber = angular.isNumber,
  isObject = angular.isObject,
  isArray = angular.isArray,
  forEach = angular.forEach,
  extend = angular.extend,
  copy = angular.copy,
  equals = angular.equals;

function isNull(value) {
  return value === null;
}

function isScope(obj) {
  return obj && obj.$evalAsync && obj.$watch;
}
angular.module('a8m.filter-watcher', [])
  .provider('filterWatcher', function() {

    this.$get = ['$window', '$rootScope',
      function($window, $rootScope) {

        /**
         * Cache storing
         * @type {Object}
         */
        var $$cache = {};

        /**
         * Scope listeners container
         * scope.$destroy => remove all cache keys
         * bind to current scope.
         * @type {Object}
         */
        var $$listeners = {};

        /**
         * $timeout without triggering the digest cycle
         * @type {function}
         */
        var $$timeout = $window.setTimeout;

        /**
         * @description
         * get `HashKey` string based on the given arguments.
         * @param fName
         * @param args
         * @returns {string}
         */
        function getHashKey(fName, args) {
          function replacerFactory() {
            var cache = [];
            return function(key, val) {
              if (isObject(val) && !isNull(val)) {
                if (~cache.indexOf(val)) return '[Circular]';
                cache.push(val)
              }
              if ($window == val) return '$WINDOW';
              if ($window.document == val) return '$DOCUMENT';
              if (isScope(val)) return '$SCOPE';
              return val;
            }
          }
          return [fName, JSON.stringify(args, replacerFactory())]
            .join('#')
            .replace(/"/g, '');
        }

        /**
         * @description
         * fir on $scope.$destroy,
         * remove cache based scope from `$$cache`,
         * and remove itself from `$$listeners`
         * @param event
         */
        function removeCache(event) {
          var id = event.targetScope.$id;
          forEach($$listeners[id], function(key) {
            delete $$cache[key];
          });
          delete $$listeners[id];
        }

        /**
         * @description
         * for angular version that greater than v.1.3.0
         * it clear cache when the digest cycle is end.
         */
        function cleanStateless() {
          $$timeout(function() {
            if (!$rootScope.$$phase)
              $$cache = {};
          }, 2000);
        }

        /**
         * @description
         * Store hashKeys in $$listeners container
         * on scope.$destroy, remove them all(bind an event).
         * @param scope
         * @param hashKey
         * @returns {*}
         */
        function addListener(scope, hashKey) {
          var id = scope.$id;
          if (isUndefined($$listeners[id])) {
            scope.$on('$destroy', removeCache);
            $$listeners[id] = [];
          }
          return $$listeners[id].push(hashKey);
        }

        /**
         * @description
         * return the `cacheKey` or undefined.
         * @param filterName
         * @param args
         * @returns {*}
         */
        function $$isMemoized(filterName, args) {
          var hashKey = getHashKey(filterName, args);
          return $$cache[hashKey];
        }

        /**
         * @description
         * store `result` in `$$cache` container, based on the hashKey.
         * add $destroy listener and return result
         * @param filterName
         * @param args
         * @param scope
         * @param result
         * @returns {*}
         */
        function $$memoize(filterName, args, scope, result) {
          var hashKey = getHashKey(filterName, args);
          //store result in `$$cache` container
          $$cache[hashKey] = result;
          // for angular versions that less than 1.3
          // add to `$destroy` listener, a cleaner callback
          if (isScope(scope)) {
            addListener(scope, hashKey);
          } else {
            cleanStateless();
          }
          return result;
        }

        return {
          isMemoized: $$isMemoized,
          memoize: $$memoize
        }
      }
    ];
  });
angular.module('a8m.chunk-by', ['a8m.filter-watcher'])
  .filter('chunkBy', ['filterWatcher',
    function(filterWatcher) {
      return function(array, n, fillVal) {

        return filterWatcher.isMemoized('chunkBy', arguments) ||
          filterWatcher.memoize('chunkBy', arguments, this,
            _chunkBy(array, n, fillVal));
        /**
         * @description
         * Get array with size `n` in `val` inside it.
         * @param n
         * @param val
         * @returns {Array}
         */
        function fill(n, val) {
          var ret = [];
          while (n--) ret[n] = val;
          return ret;
        }

        function _chunkBy(array, n, fillVal) {
          if (!isArray(array)) return array;
          return array.map(function(el, i, self) {
            i = i * n;
            el = self.slice(i, i + n);
            return !isUndefined(fillVal) && el.length < n ? el.concat(fill(n - el.length, fillVal)) : el;
          }).slice(0, Math.ceil(array.length / n));
        }
      }
    }
  ]);
angular.module('app', ['a8m.chunk-by']).controller('mainCtrl', function($scope) {
  $scope.myJson = ["mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9"];
})





  
    
      {{item}}

using row and column in angularjs

Answers (1)

Edit

Related Questions