Question

我正在尝试为我的离子应用程序创建两列网格，以便它连续打印两个x，但无法找到使用ng-repeat执行此操作的方法。这是我想要做的事情

 <div class="row" ng-repeat="x in ['0','1','2','3','4']">
  <div class="col">
    <span>{{x}}</span>
  </div>
  <div class="col">
    <span>{{??}}</span> // what should go here?
  </div>
</div>

我期望做的是

 <div class="row" >
     <div class="col">
      <span>0</span>
     </div>
     <div class="col">
      <span>1</span>
     </div>
     </div>
     <div class="row" >
      <div class="col">
       <span>2</span>
      </div>
      <div class="col">
       <span>3</span>
      </div>
      </div>
<div class="row" >
      <div class="col">
       <span>4</span>
      </div>
      </div>

Answer 1

这里你可以测试什么

<div class="row" ng-repeat="x in array |limitTo:2">
  <div class="col">
    <span>{{x}}</span>
</div>

如果你想进行另一次ng-repeat，你可以将你对表格数组进行迭代的数字切片并重新分配。

您可以使用此示例LimitTo

Answer 2

你可以这样做。

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.items = ['0', '1', '2', '3', '4'];
  $scope.itemCount = Math.ceil($scope.items.length / 2);
  $scope.counts = new Array($scope.itemCount);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />

<body ng-app="app" ng-controller="ctrl">
  <div class="col-lg-12">
    <div class="row" ng-repeat="count in [].constructor(itemCount) track by $index">
      <div class="col">
        <span>{{items[$index* 2] }}</span>
      </div>
      <div class="col">
        <span>{{items[$index* 2 + 1]}}</span>
      </div>
    </div>
  </div>
</body>

Answer 3

试试这个

在您的控制器中：

$scope.myList = ['0','1','2','3','4'];

然后在你的模板中：

<div class="row" ng-repeat="x in myList" ng-if="$index % 2 === 0">
   <div class="col" ng-if="$index < myList.length">
     <span>{{x[$index]}}</span>
   </div>
   <div class="col" ng-if="$index + 1 < myList.length">
     <span>{{x[$index + 1]}}</span>
   </div>
</div>

请告诉我它是否有帮助！

Answer 4

您应该将数组映射到数组列表（在控制器中更好）并进行嵌套的ng-repeat：

<div ng-repeat="col in [['0','1'],['2','3'],['4']]">
  <div ng-repeat="x in col">
    <span>{{x}}</span>

Answer 5

您可以使用bootstrap和class =“col-sm-6”进行此操作：

<div class="col-sm-6" ng-repeat="x in ['0','1','2','3','4']">
    <span>{{x}}</span>
</div>

如何在不同的行中使用ng-repeat

5 个答案: