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

在HTML模板中操纵这样的循环很困难。一种解决方案是创建一个2D数组，每个子数组包含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;
  }
}]);

Answer 2

我的问题是通过在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
    }

});

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

2 个答案:

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

2 个答案:

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