javascript - 在angularjs中使用行和列

Question

http://jsfiddle.net/ocrsppvc/

<div ng-repeat="json in myJson track by $index" ng-class="{'row':$index % 4 === 0}">
  <div class="col-md-3 col-sm-4 col-xs-6" >
    {{$index+1}}
  </div>
</div>

我想连续有 4 个项目，但我的 ng-class 逻辑有问题。

Answer 1

我个人推荐的是使用一组名为 Angular Filter 的工具。 .这是您注入(inject)到模块中的依赖项，它可以为某些事情提供很多帮助，就像您在这里遇到的问题一样。我使用的那个叫做“chunkBy”，你可以在那个链接上读到。

我已经设置了This Plunkr作为演示，但代码在这里

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

<link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="angular-filter@0.5.7" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
<div ng-app="app" ng-controller="mainCtrl">
  <div ng-repeat="json in myJson|chunkBy:4" class="row">
    <div class="col-md-3 col-sm-4 col-xs-6" ng-repeat="item in json">
      {{item}}
    </div>
  </div>
</div>

编辑

如果您只想使用chunkBy 所需的代码，我已将其提取出来。归功于a8m (如果您最终使用它，将他的版权包含在文件顶部可能是一件好事)

/**
 * 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 <ariel@mashraki.co.il>
 * @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"];
})

<link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="angular-filter@0.5.7" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
<div ng-app="app" ng-controller="mainCtrl">
  <div ng-repeat="json in myJson|chunkBy:4" class="row">
    <div class="col-md-3 col-sm-4 col-xs-6" ng-repeat="item in json">
      {{item}}
    </div>
  </div>
</div>