Angular.js mit bootstrap und dynamisch erstellen von Zeilen

Ich versuche herauszufinden, wie Sie dynamisch erstellen bootstrap Zeile divs mit der Klasse row-fluid mit angular.js mit der ng-repeat Richtlinie.

Hier ist die Winkelgeschwindigkeit:

 <div ng-repeat="task in tasks" class="row-fluid">
     <div class="span6 well">{{task.name}}</div>
 </div>

Bedeutet dies nicht aber funktionieren. Die bootstrap html ich erstellen wollen, ist:

http://jsfiddle.net/YKkXA/2/

Grundsätzlich muss ich tun mod 2 der index innerhalb von ng-repeat, und wenn es auf 0 ist, schließen Sie die </div> und erstellen Sie eine neue <div class="row-fluid">. Wie ist das möglich?

  • Sie können verwenden Sie die vordefinierte variable $index innerhalb der ng-repeat-Schleife
  • Können Sie ein Beispiel geben, wie genau würde $index uns helfen? Wir brauchen im Grunde eine if - Anweisung innerhalb der ng-repeat.
  • Ich sah das Beispiel, es gibt keinen Weg, es zu tun mit ngRepeat. Schreiben Sie eine benutzerdefinierte Richtlinie erstellen der html-dinamically
  • Sie sollten akzeptieren Anthony ' s Antwort auf diese - es löst das problem, und dies ist das erste Ergebnis bei der Suche nach dieser in Google-es sollte darauf hingewiesen werden, dass es der richtige Weg, es zu tun.
  • Siehe meine Antwort hier für einen filter, um diese zu bewältigen, die NICHT zu einer unendlichen digest: stackoverflow.com/a/21653981/1435655
InformationsquelleAutor Justin | 2013-02-07
  1. 14

    Die Idee ist, filtern Sie Ihre Positionen in der Reihenfolge zu gruppieren, und stellen Sie eine zweite ngRepeat Iteration auf sub-Elemente.

    Erste, fügen Sie die filter, um Ihre Modul :

    module.filter('groupBy', function() {
    return function(items, groupedBy) {
        if (items) {
            var finalItems = [],
                thisGroup;
            for (var i = 0; i < items.length; i++) {
                if (!thisGroup) {
                    thisGroup = [];
                }
                thisGroup.push(items[i]);
                if (((i+1) % groupedBy) === 0) {
                    finalItems.push(thisGroup);
                    thisGroup = null;
                }
            }
            if (thisGroup) {
                finalItems.push(thisGroup);
            }
            return finalItems;
        }
    };
});

    In Ihrem controler (denn wenn Sie den filter direkt in Ihrer Vorlage, dann haben Sie eine $digest-loop):

    function TaskCtrl() {
    $scope.tasksGroupBy2 = $filter('groupBy')(taskGroup, 2);
}

    Und in Ihrem .html :

    <div ng-repeat="taskGroup in tasksGroupBy2" class="row-fluid">
    <div ng-repeat="task in taskGroup" class="span6 well">{{task.name}}</div>
</div>
    • Jedermann stolpert über diese, sollte dies die akzeptierte Antwort - hat Prima funktioniert für mich.
    • Auf der einen Seite, das vermeidet die Verwendung von komplizierten Richtlinien (die ng-repeat auf alle Elemente und erstellen Sie Zeilen und Spalten dynamisch). Auf der anderen - die Elemente wurden nun aufgeteilt, so dass die Traversierung von Ihnen und anderen 'alle Elemente' Funktionen mit 2-Wege-Bindung weniger... nett 😛
    • Hier ist, wie dies in der Ansicht ohne die unendliche digest: stackoverflow.com/a/21653981/1435655
    • Hier ist eine Zusammenfassung einschließlich der test für Sie: gist.github.com/mrzmyr/10972141
    InformationsquelleAutor Anthony O.
  2. 4

    Als eine Verbesserung, um die Antwort Antonius gab, ich würde sagen, Sie könnten sparen Sie sich eine Menge ärger mit dem slice-Methode, anstatt zu gehen durch alle diese Bedingungen.

    Versuchen, definieren Sie Ihren filter wie folgt:

    module.filter('group', function() {
    return function(items, groupItems) {
        if (items) {
            var newArray = [];

            for (var i = 0; i < items.length; i+=groupItems) {
                if (i + groupItems > items.length) {
                    newArray.push(items.slice(i));
                } else {
                    newArray.push(items.slice(i, i + groupItems));
                }
            }

            return newArray;
        }
    };
});

    Danach können Sie die filter auf dem controller als Anthony zeigte in seiner Antwort:

    function Controller ($scope) {
    $scope.itemsGrouped = $filter('group')(itemsArray, 5);
}
    InformationsquelleAutor alex952
  3. 0

    Off-Topic: die Verwendung von bootstrap können Sie einfach divs class="span6 gut" in einem bigass Zeile, wie Sie stapeln schön. (Sie erhalten ein responsive layout zu). Sorry, wenn es war nur ein Beispiel das Verhalten, dass bootstrap nicht umgehen kann. Anthony und Remigio sind; Sie haben, um ein extra-Modul, das Fahrzeug generieren divs eingebettet in Ihre ng-tags wiederholt.

    • Das ist so nicht ganz richtig. Manchmal klappt es, othertimes es nicht, je nach der Höhe des divs.
    InformationsquelleAutor Skiper Skiprovic
Schreibe einen Kommentar