在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個項目後創建一行 - 離子網格

回答

相關問題