Html 使用ng repeat包装列_Html_Css_Angularjs_Angularjs Ng Repeat_Ng Repeat

Html 使用ng repeat包装列

html css angularjs

Html 使用ng repeat包装列,html,css,angularjs,angularjs-ng-repeat,ng-repeat,Html,Css,Angularjs,Angularjs Ng Repeat,Ng Repeat,我正在使用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 有什么好方法可以做到这一点吗？这不是最优雅的解决方案，但它确实有效。

我正在使用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

有什么好方法可以做到这一点吗？

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

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>


NG重复列包装
{{names[$index]}
{{names[$index+5]}
{{names[$index+10]}

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();
});

var-app=angular.module（'app'，[]）；
应用程序控制器（'ctrl'，函数（$scope）{
$scope.names=[“Bob”、“Susan”、“Mark”、“John”、“Billy”、“Ted”、“Marcy”、“Wilma”、“Jeff”、“Yasmin”、“Pete”、“Taylor”、“Matthew”、“Laney”、“Jesus”]；
$scope.rowscont=[]；
$scope.createRows=函数（）{
对于（变量i=0；i<（$scope.names.length/3）；i++）{
$scope.rowsunt.push（i）；
}
};
$scope.createRows（）；
});

如果我正确理解您的问题，可以使用column属性：这可能不是一个很好的主意，因为浏览器支持不太好。column属性目前运行良好，我只需要在明天内部使用它，并且需要尽快修复它。

<!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>

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();
});