Question

我正在使用ng-repeat在我的控制器中打印一个数组。我的问题是，我希望我的重复从我的第n项之后的顶部开始列出，如下所示：

 Item 1    Item 6    Item 11
 Item 2    Item 7    Item 12
 Item 3    Item 8    Item 13
 Item 4    Item 9    Item 14
 Item 5    Item 10   Item 15

我的代码：

HTML

<div class="participant-list" >
    <div class="participant" ng-repeat="speaker in participants | orderBy:'name'" ng-click="addSpeaker(speaker.id)">{{speaker.name}}, {{speaker.city}}</div>    
</div>

CSS

.participant-list {
    height: 800px;
}

.participant {
    margin: 5px 0px;
    padding: 2px 0px;
    cursor: pointer;
}

有没有好办法呢？

Answer 1

这不是最优雅的解决方案，但它确实有效。如果项目数不是三的倍数（或者您想要的列数多少），则不起作用。要解决此问题，您可以向数组添加空白项。您还必须手动在控制器中对其进行排序。

的index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <title>NG Repeat Column Wrapping</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="./ctrl.js"></script>
  </head>
  <body ng-controller="ctrl">
    <div class="container">
      <div class="row" ng-repeat="x in rowsCount">
        <div class="col-sm-4">
          <span>{{ names[$index] }}</span>
        </div>
        <div class="col-sm-4">
          <span>{{ names[$index + 5] }}</span>
        </div>
        <div class="col-sm-4">
          <span>{{ names[$index + 10] }}</span>
        </div>
      </div>
    </div>
  </body>
</html>

ctrl.js

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.names = ["Bob", "Susan", "Mark", "John", "Billy", "Ted", "Marcy", "Wilma", "Jeff", "Yasmin", "Pete", "Taylor", "Matthew", "Laney", "Jesus"];
  $scope.rowsCount = [];
  $scope.createRows = function() {
    for (var i = 0; i < ($scope.names.length / 3); i++) {
      $scope.rowsCount.push(i);
    }
  };
  $scope.createRows();
});

使用ng-repeat包裹色谱柱

1 个答案: