ng-repeat 问题以创建逻辑。 （代码问题）

Question

我这样做是为了使用角度 ng-repeat 创建动态滑块幻灯片。 但我的代码中有一些问题。这不是我想要的。

类 col-sm-2 应该只重复数组的 6 个对象，并且在该类项目之后应该重复。如果这不解释。然后我也显示所需的 html。

我的代码：

<div class="item" ng-class="{'active': key_main == 0}" ng-if="key_main < b_length" ng-repeat="(key_main, value_main) in BookmarkList">
  <div class="row-fluid">
    <div class="col-sm-2" ng-repeat="(key, value) in BookmarkList">
      <a ng-click="PostBookmarkbyId(value.Id)" class="thumbnail no-margin-b">
        <img check-image ng-if="value.WebPath != null && value.WebPath != ''" ng-src="{{value.WebPath}}">
      </a>
      <span class="rows text-center">{{value.Name}}</span>
    </div>
  </div>
</div>

必填：

<div class="item active">
    <div class="row-fluid">
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
    </div>
</div>
<div class="item">
    <div class="row-fluid">
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc abf ash</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
    </div>
</div>
<div class="item">
    <div class="row-fluid">
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
      <div class="col-sm-2">
        <a href="#x" class="thumbnail no-margin-b"><img src="img/profile_small.jpg"></a>
        <span class="rows text-center">abc</span>
      </div>
    </div>
</div>

Answer 1

我的问题通过在 JavaScript 中使用 array_chunk 得到了解决。

array_chunk(array_data, 6, true);

function  array_chunk ( input, size, preserveKeys ) {

      var x
      var p = ''
      var i = 0
      var c = -1
      var l = input.length || 0
      var n = []

      if (size < 1) {
        return null
      }

      if (Object.prototype.toString.call(input) === '[object Array]') {
        if (preserveKeys) {
          while (i < l) {
            (x = i % size)
              ? n[c][i] = input[i]
              : n[++c] = {}; n[c][i] = input[i]
            i++
          }
        } else {
          while (i < l) {
            (x = i % size)
              ? n[c][x] = input[i]
              : n[++c] = [input[i]]
            i++
          }
        }
      } else {
        if (preserveKeys) {
          for (p in input) {
            if (input.hasOwnProperty(p)) {
              (x = i % size)
                ? n[c][p] = input[p]
                : n[++c] = {}; n[c][p] = input[p]
              i++
            }
          }
        } else {
          for (p in input) {
            if (input.hasOwnProperty(p)) {
              (x = i % size)
                ? n[c][x] = input[p]
                : n[++c] = [input[p]]
              i++
            }
          }
        }
      }

      return n
    }

});

Answer 2

很难在 HTML 模板中操作这种循环。一种解决方案是创建一个二维数组，每个子数组包含 6 个项目。我创建了一个过滤器 loopEvery 以便可以跨控制器重用代码。 Click here to view code on JSFiddle.

HTML 代码

<div ng-app="LoopApp" ng-controller="LoopController">
  <div ng-repeat="array in formattedArray">
    <div ng-repeat="object in array">
      <span>{{object}}</span>
    </div>
    <br>
  </div>
</div>

JS 代码

// App declaration
var LoopApp = angular.module("LoopApp", []);
// App controller
LoopApp.controller("LoopController", ["$scope", "$filter", function($scope, $filter) {
  $scope.BookmarkList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
  $scope.formattedArray = $filter('loopEvery')($scope.BookmarkList, 6);
}]);
// Loop every n items filter
LoopApp.filter("loopEvery", [function() {
  return function(mainArray, loopEvery) {
    var subArray = [], formattedArray = [];
    angular.forEach(mainArray, function(item, index) {
      subArray.push(item);
      if ((subArray.length == loopEvery) || (index == mainArray.length - 1)) {
        formattedArray.push(subArray);
        subArray = [];
      }
    });
    return formattedArray;
  }
}]);