ng-repeatを使用してカラムをラップします

私はng-repeatを使用してコントローラ内のアレイを印刷しています。アイテム番目、次のように：私の問題は、私は私の繰り返しが私のnの後に上からリストを開始したいということですng-repeatを使用してカラムをラップします

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

<div class="participant-list" > 
    <div class="participant" ng-repeat="speaker in participants | orderBy:'name'" ng-click="addSpeaker(speaker.id)">{{speaker.name}}, {{speaker.city}}</div>  
</div>

CSS

.participant-list { 
    height: 800px; 
} 

.participant { 
    margin: 5px 0px; 
    padding: 2px 0px; 
    cursor: pointer; 
}

これを行うには良い方法がありますか？

出典

2016-04-08 BluePrint

は、列プロパティを使用することができますhttps://jsfiddle.net/mbnmL67m/ – Rob

おそらくされていないことブラウザのサポートとして非常に良いアイデアはそれほど良いものではありません。 –

Columnプロパティは今のところうまく動作しますが、明日の間何かのために必要です。できるだけ早く修正する必要があります。 – BluePrint

これは最も洗練された解決策ではありませんが、機能します。アイテムの数が3の倍数（または必要な数の列）でない場合は機能しません。空の項目を配列に追加することができるように修正します。また、コントローラーで手動でソートする必要があります。私が正しくあなたの質問を理解していれば

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>

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

出典

2016-04-09 18:06:56

ng-repeatを使用してカラムをラップします

答えて

関連する問題