Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

AngularJS 1.3 Grundkurs

Style-Eigenschaften definieren

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Style-Direktive definiert und beeinflusst in AngularJS die Style-Eigenschaften auf einem HTML-Element mittels Bindungen.
04:00

Transkript

Ich habe hier ein kleines Beispiel für euch vorbereitet, mit dem ich euch sehr gerne die ngStyle-Direktive näher bringen möchte. Die ngStyle-Direktive erlaubt es euch, Style-Eigenschaften auf einem HTML-Element mittels Bidnungen definieren zu können oder auch beeinflussen zu können. Um das Ganze mal zu demonstrieren, habe ich mir zusätzlich bootstrap ausgebockt und von bootstrap die progress-bar-Klasse und die progress-bar-CSS-Klasse, die sorgt dafür, dass abhängig der Breiter eines Objektes dann hingegangen wird und dann eine progress-bar quasi optisch simuliert wird. Die Breite dieses Objektes möchte ich jezt eben mit ngStyle dynamisch generieren. Und das mache ich relativ einfach, indem ich ngStyle selber so verwende, dass ich in ihr ein Objekt generiere. Die Objekteigenschaft, die hier generiert wird, ist width, das heißt, ich möchte über ngStyle ein Objekt haben, dass die Breite bestimmt. Zusätzlich möchte ich dann hierhin gehen und möchte, dass die Breite dynamische ist über eine Bindung. Und dabei ist die Bindung zurückzuführen auf eine Eigenschaft, die sich auf meinem Scope befindet, die habe ich hier vorinitialisiert mit dem Wert 10. Und zusätzlich möchte ich noch, dass diese Breite prozentual angegeben wird, das heißt, was ich hier habe, ist im Endeffekt nichts anderes als ein Style-Wert für die Breite 10 Prozent. Hätte ich das jetzt per Hand definieren wollen, wäre ich hingegangen, ohne da einfach nur gesagt: style, width, 10 Prozent. Exakt nichts anderes wird geschrieben von der Direktive ngStyle in dem Moment, wo loadingPercent ausgelesen wurde, das erste Mal initialisiert wurde. Jetzt bin ich aber noch hingegangen und habe zusätzlich den Wert loadingPercent gebunden an ein dropdownminü und in dem dropdownminü mit ng-model. Lass ich das loadingPercent dann definieren und zwar abhängig davon, ob ich auf 0,10,20,30,40 bis 100 drauf gehe mit den Werten 100 bis 0 rückwärts, das heißt, abhängig davon, was ich hier wähle, wird sich der loadingPercent Wert ändern, und davon abhängig dann natürlich auch hier der prozentuale Wert bishin zu 100 beziehungsweise 0 Prozent. So viel zu Theorie. Lasst uns das Ganze jetzt mal auf Feierweltband gutachten! Dafür öffne ich jetzt hier das Sample. Und die Animation, die ihr hier übrigens sieht, ist eine reine CSS-Animation, das heißt, hier hat Angular nichts zu tun, das wird mir einfach von bootstrap geliefert. Wenn ich jetzt hier auf dem Wert 90 klicken würde, hätte das zu Folge, dass auf der linken Seite in Zeile 80 entsprechend die Option mit dem Wert 90 selektiert werden würde. Das werde dafür sorgen, dass im Model die Eigenschaft loadingPercent den Wert 90 bekommt. Über die Bindung würde dann ngStyle drauf reagieren und den Style wird so setzen, dass wir hier 90 Prozent breiter haben. Na auf die Art und Weise kann ich sehr,sehr schön und sehr einfach dann hier hingehen, und diese Breiten-Einstellung definieren. Guck uns das noch mal an, wie das Ganze aussieht. Dann sehen wir hier, dass dann tatsächlich die Style-Eigenschaft width auf 60 Prozent steht, weil ich hier den Wert 60 gewählt habe. Toggle ich, das wird hier den oben selektierten Wert 70 angezeigt. Schau ich mir im gleichen Atemzug mal die Angular-Komponente an, dann sehe ich m dann hier das loadingPercent eben der Wert 10 ist initial, ändere ich das hier, wird dann auch loadingPercent geändert, und das ist eigentlich im Grunde genommen auch der Trigger dafür, dass ngStyle die Style-Eigenschaften aktualisiert auf diesem HTML und dafür sorfgt, dass dann die bootstrap-Animation zu sehen ist In diesem Video haben wir also gemeinsam die ngStyle-Direktive kennen gelernt, mit dem ihr in die Lage versetzt werdet, eine gebundene Style-Eigenschaft auf einem HTML-Element definieren zu können.

AngularJS 1.3 Grundkurs

Legen Sie mit AngularJS moderne, anspruchsvolle Webprojekte auf der Basis von HTML, CSS und JavaScript an.

4 Std. 15 min (74 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
AngularJS AngularJS 1.3
Exklusiv für Abo-Kunden
Erscheinungsdatum:19.11.2014

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!