在Angular ng-repeat中每2个项目后创建一行 - 离子网格

我需要在我的应用中通过ng-repeat创建如下所示的strcuture。在Angular ng-repeat中每2个项目后创建一行 - 离子网格

<div class="row"> 
    <div class="col-50">1</div> 
    <div class="col-50">2</div> 
</div> 
<div class="row"> 
    <div class="col-50">3</div> 
    <div class="col-50">4</div> 
</div>

现在我的代码如下：

<div class="row"> 
    <label class="item item-radio col col-50" ng-repeat="a in question.answer"> 
    <input type="radio" name="answers" class="a-{{ a.correct }}" value="{{ a.correct }}" ng-click='ansValue("{{ a.correct }}")'> 

    <div class="item-content"> 
    <img src="img/ans/{{ a.option }}" /> 
    </div> 

    <i class="radio-icon ion-checkmark"></i> 
    </label> 
</div>

但在上面的代码，它只是一个单行标记，我有。我不想以某种方式让行标记包含/包装循环中的每2项。达到此目的的最佳方法是什么？

编号：Ionic Grid Doc

来源

2014-11-01 esafwan

读NG重复启动和NG-重复端。 – wayne 2014-11-01 10:04:40

您好@wayne，谢谢。虽然这并没有解决我的问题。我从来不知道这是存在的。下面的答案似乎现在是我的解决方案。 – esafwan 2014-11-01 11:07:32

我设法用$even做到这一点。

<div ng-repeat="number in numbers"> 

    <div class="row" ng-if="$even"> 
     <div class="col col-50">{{numbers[$index]}}</div> 
     <div class="col col-50">{{numbers[$index + 1]}}</div> 
    </div> 

</div>

Here's一个可用的JSFiddle。

来源

2014-11-01 10:58:46

漂亮的伎俩..谢谢 – astroanu 2015-05-16 10:27:55

我正在做这个，但％3与ng-repeat中的很多标记。而不是重复我的代码3次，我发现我可以做一个嵌入的ng-repeat，像这样：ng-repeat =“i in [$ index + 0，$ index + 1，$ index + 2]”然后我只需要做我的标记一次，并参考list_of_items [i] – chad 2015-06-03 13:38:10

从@Patrick Reck的解决方案是优秀的，但它迫使你两次重复代码，

我建议这种改进：

<div ng-repeat="number in numbers">  
     <div class="row" ng-if="$even"> 
      <div class="col col-50" 
       ng-repeat="num in [numbers[$index],numbers[$index + 1]]"> 
       {{num}} 
      </div> 
     </div> 
    </div>

这样你会写代码一次，就好像这是一个正常NG重复

来源

2015-10-04 23:15:29

这很好，但只有你有一个偶数量的数字。否则，它会留下尾部的div。我必须用'ng-if =“number”'在'.col.col-50'上添加另一个换行div来忽略尾随的空号。 – joshwhatk 2016-03-31 15:24:12

@joshwhatk简单的解决方案将添加ng - 如果这样： '[div class =“col col-50”ng-repeat =“num in [numbers [$ index]，numbers [$ index + 1]]”ng -if =“num”>' – 2016-06-02 17:35:36

@ ET-CS你绝对正确，直接添加'ng-if'更加简洁。我无法编辑评论添加，谢谢！ – joshwhatk 2016-06-02 17:51:49

您可以添加柔性包装：包装类行

http://jsfiddle.net/0momap0n/99/

<div ng-controller="MyCtrl"> 
    <div class="row" style="flex-wrap: wrap"> 
    <div class="col col-50" ng-repeat="number in numbers">{{number}}</div> 
</div> 

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.numbers = [1, 2, 3, 4, 5, 6]; 
}

来源

2016-02-10 17:01:22 Zao

flex-wrao：wrap与我的4.1.1 android设备不兼容。你能帮我吗？ – 2016-02-11 06:15:24

测试：flex-flow：换行 – Zao 2016-02-11 09:08:24

仍然不能工作 – 2016-02-11 09:09:53

我会写这样，你可以增加$index % 3匹配，你想，这样一个将创建3列的列数...

<div class="row"> 
    <div class="" ng-repeat="i in range(1, 9)"> 
    <div class="clearfix" ng-if="$index % 3 == 0"></div> 

     <div class="col"> 
     <h1>{{ i }}</h1> 
     </div> 

    </div> 
</div>

来源

2017-05-31 15:13:18

该解决方案是使用Flex -flow和解决了这个精辟：

CSS

.container { 
    display: flex; 
    flex-flow: row wrap; 
    } 
    .item { 
    width: 50%; 
    }

HTML

<div class="container"> 
    <div class="item" *ngFor="let number of numbers"> 
     {{number}} 
    </div>

来源

2017-06-17 16:26:14 sixten

在Angular ng-repeat中每2个项目后创建一行 - 离子网格

回答

相关问题