Wie kann eine Listen- und Rasteransicht-Wechselsteuerung, die in Teilbereichen in AngularJS geladen wird, umgeschaltet werden?
Ich bin neu in AngularJS und konnte keine spezifischen Tutorials zu einer Listen- und Rasteransicht-Umschalttaste finden, die in zwei verschiedenen HTML-Partials geladen wird. Lies offizielle ng-include , ng-switch offizielle Dokumente und durchsuchst SO. Leider möchten wir nicht den UI-Router verwenden.
Ist das Laden in zwei Teiltönen ( list.html und grid.html ) die richtige Winkelcodierung?
Die relevanteste Hilfe, die ich gefunden habe, sind diese:
1. Ссылка (Beispiel # 5)
Es gab einen aufschlussreichen Kommentar zu Beispiel # 5
Schöne einfache Beispiele - gut gemacht. Das letzte Beispiel, das zwischen Raster- und Listenansichten wechselt, ist nicht sehr effizient, da es beide Optionen erstellt und das zeigt / blendet. EIN einfacherer / besserer Ansatz wäre die Verwendung einer einzelnen UL mit Repeater und ng-switch und aktivieren Sie dann die alternativen Listenelemente mit ng-Schalter-Fall. - Johan
2. Ссылка
3. erstellen eine einzelne HTML-Ansicht für mehrere Teilansichten in angularjs
4. Bedingtes ng-include in angularjs
Mein HTML-Code
%Vor%Mein Anweisungscode
%Vor%5 Antworten
Sie sollten die Bereichseigenschaft des Anwendungscontrollers definieren, die die URL der Vorlage für ng-include enthält, und diese Eigenschaft an den Geltungsbereich Ihrer Richtlinie binden. Stellen Sie sicher, dass in Ihrer Anweisung ein isolierter Bereich verwendet wird, um beim Ändern des Bereichs der Richtlinie Nebenwirkungen zu vermeiden. Hier ist ein Beispiel dafür (siehe Kommentare im Code):
JavaScript
%Vor%Hauptseite der Anwendung (index.html)
%Vor%Routenvorlage (main.html)
%Vor%Listenansichtsvorlage (list.html)
%Vor%Rasteransichtsvorlage (grid.html)
%Vor%Plunker: Ссылка
Bonus: Gitter reagiert, spielen Sie nur ein bisschen mit einer Fenstergröße
Eine andere Option:
Wie Sie wahrscheinlich bemerkt haben, sind grid.html und list.html sehr ähnlich. Wenn Sie also nur diese beiden Optionen haben, können Sie ng-include mit separaten umschaltbaren Ansichten überhaupt nicht verwenden, sondern die Inhaltsansicht direkt in Die Vorlage Ihrer Route und wechseln Sie einfach Klassen in Panels mit ng-class Direktive, die Klassen wechseln können, wenn die Ansicht geändert wird.
Routenvorlage (main.html)
%Vor%Hier ist ein einfacher funktionierender JSBin: Ссылка
Die Direktive ng-include verwendet eine Variable für die Vorlage, die eingeschlossen werden soll. Um Ihren Code zu aktualisieren, damit er funktioniert, sollte Ihre toggleGrid() -Methode nicht etwas zurückgeben, sondern eine Variable für den Bereich, den Sie wie in meinem Beispiel an ng-include übergeben.
Im Grunde genommen müssen Sie eine Listenansicht und ein Raster gleichzeitig auf derselben Seite platzieren und einzeln anzeigen, indem Sie mit der Umschalttaste zwischen ihnen wechseln (die CSS-Klasse ändern). Ich bespreche das Beispiel # 5 hier:
Erste Layoutvariable im Bereich
%Vor%Hier sind die Umschalttasten
%Vor%Dies sind die Raster- und Listenblöcke.
%Vor%CSS, das das Listen- und Rasterlayout erstellt
%Vor%Zum besseren Verständnis der Umschaltfunktion zum Anzeigen der Listen- und Rasteransicht: folgen Sie diesem Link und ich hoffe, dass dies hilfreich ist.
Hier haben wir Jquery benutzt, wenn Sie damit experimentieren. Platziere das:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Tags und Links javascript angularjs angularjs-ng-include ng-switch