Umbruchspalte mit ng-repeat

Ich benutze ng-Wiederholung, um ein Array in meinem Controller zu drucken. Mein Problem ist, dass ich meine wiederholen will von der Spitze starten Auflistung nach meinem n-ten Elemente, wie folgt aus:Umbruchspalte mit 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

Mein Code:

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

Gibt es einen guten Weg, dies zu tun?

Quelle

2016-04-08 BluePrint

Die Spalte kann Eigenschaft verwenden, wenn ich Ihre Frage richtig verstanden hat: https://jsfiddle.net/mbnmL67m/ – Rob

das ist wahrscheinlich nicht eine sehr gute Idee, da die Browser-Unterstützung nicht so gut ist. –

Column-Eigenschaft funktioniert gut für jetzt, ich brauche es nur für etwas interal morgen und muss es so schnell wie möglich beheben. – BluePrint

Es ist nicht die eleganteste Lösung, aber es funktioniert. Es funktioniert nicht, wenn die Anzahl der Elemente nicht ein Vielfaches von drei ist (oder beliebig viele Spalten). Um das zu beheben, können Sie leere Elemente zum Array hinzufügen. Sie müssen es auch manuell im Controller sortieren.

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

Quelle

2016-04-09 18:06:56

Antwort

Verwandte Themen