異なる行でng-repeatを使用する方法

私のイオン性アプリケーション用に2列のグリッドを作成しようとしています。xを2行しか印刷できませんが、ng-repeatで行う方法はありません。その後異なる行でng-repeatを使用する方法

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

をテンプレートに：ここで私は私は何を期待することは

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

出典

2017-02-17 sam

。チェック@samフィルタ – digit

はあなたの配列と使用を分割しましたそれが役に立つかもしれない例 – abdoutelb

@AbdElrahmanTelbこれは、それは完全に私の質問を解決していなかった私は実際にあなたがplzの答え – sam

この例を利用することができます。あなたがオブジェクトの配列に文字列配列をマッピングすることができればしない限り、あなたはそれを行うことができれば、悪い習慣です

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>

出典

2017-02-17 12:22:00 Alok

があなたのコントローラで

これを試してみている

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

助けてくれたら教えてください！あなたは（コントローラでより良い）アレイのリストにあなたの配列をマッピングし、ネストされたNG-繰り返しをしなければならない

出典

2017-02-17 11:52:01

：

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

出典

2017-02-17 11:52:49

あなたは次のようにブートストラップクラス=「COL-SM-6」でこれを行うことができますこの：あなたは麻痺をスライスすることができ、別のNG-繰り返し行いたい場合は、

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

をテストすることができるものをここで

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

出典

2017-02-17 11:54:35 mpdev7

あなたはフォーム配列を反復し、それを再割り当てします。

あなたはそれをこのような何かを行うことができますLimitTo

出典

2017-02-17 12:03:51 abdoutelb

に手の込んだAPI – sam

：limitTo | – abdoutelb

異なる行でng-repeatを使用する方法

答えて

関連する問題