nicht angemeldet
AngularJS ng-class
Hallo,
Ich hätte eine einfache Frage bzgl. ng-class -> Hier ist mein Beispiel: Linkbeschreibung ich möchte jetzt die Klasse vom Roten ändern, wenn man die checkbox ändert. Geht das irgendwie.
Danke! Hannes
-
Tach!
Ich hätte eine einfache Frage bzgl. ng-class -> Hier ist mein Beispiel: Linkbeschreibung ich möchte jetzt die Klasse vom Roten ändern, wenn man die checkbox ändert. Geht das irgendwie.
Das ist doch in dem Beispiel schon so vorhanden. Beschreibe bitte genauer, was du wo erwartest und was nicht passiert.
Generelles Vorgehen ist, die Checkbox an eine Eigenschaft des Models zu binden (irgendwas im $scope) und an der anderen Stelle in Abhängigkeit davon die Klasse entsprechend setzen.
Zu beachten ist, dass "Wenn du ng-model verwendest und du da keinen Punkt hast, machst du was verkehrt" ist der grundlegende Leitspruch, den einer der Angular-Entwickler (Miško Hevery) gesagt hat.
$scope.foo = 42;Sowas kann nicht auf Änderungen überwacht werden, weil die 42 ein primitiver Wert ist, der per Kopie weitergegeben wird. Wenn du foo änderst, sind die Kopien nicht betroffen und bekommen von der Änderung nichts mit. Stattdessen sollte man immer ein Objekt nehmen.
$scope.options = { foo: 42 };Damit bekommt man den erwähnten Punkt: options.foo und Angular kann problemlos einen Watch auf die Referenz zu dem Objekt setzen.
dedlfix.
-
Das ist doch in dem Beispiel schon so vorhanden. Beschreibe bitte genauer, was du wo erwartest und was nicht passiert.
Hallo,
danke für deine Antwort! Ich hab mein Beispiel modifiziert. Was ich haben möchte ist, wenn man die Checkbox selektiert, dass NUR die grünen Balken erscheinen und den roten Balken die Klasse ... padding zugewiesen wird, dass diese nicht sichtbar sind. Geht das irgendwie - ich probiert schon einige Zeit aber ohne Erfolg.
Vielen Dank für Eure Hilfe!! Hannes
-
Tach!
Ich hab mein Beispiel modifiziert.
Ich kann nicht erkennen, wo der Unterschied liegt. Alles ist so wie in meiner Erinnerung.
Was ich haben möchte ist, wenn man die Checkbox selektiert, dass NUR die grünen Balken erscheinen und den roten Balken die Klasse ... padding zugewiesen wird, dass diese nicht sichtbar sind.
Ich hab da mal dran rumgefiddelt und so sollte es nun das sein, was du wolltest. Zudem hab ich aufgeräumt. Die Logik kann man zwar in ng-class unterbringen, sollte man aber nicht. Ich hab stattdessen einen $watch auf den Checkbox-Wert gesetzt. (Beachte auch das Objekt settings statt des primitiven Wertes. (Ob der Name passend ist, musst du entscheiden.))
Ein input braucht gar nicht so viele Attribute, wenn es nur mit Angular arbeiten soll, type und ng-model und gut ist. Statt $watch wäre auch ein ng-change im input möglich, aber dann fehlt die initiale Abarbeitung der Funktion, die jetzt im $watch steckt. Diese Funktion erweitert das Model um eine Eigenschaft. Wenn das anderenorts stört, solltest du aus deinem Model ein separates Viewmodel zum Zwecke der Darstellung erstellen. Die Erzeugung des Models sollte auch besser in einen Service ausgelagert werden. Es ist nicht Aufgabe der Controller, die Daten zu erzeugen. Für das Beispiel mag das gehen, aber besonders elegant ist das nicht. Zudem kann man das Array auch direkt notieren und muss nicht es nicht mit einem Haufen Zwischenvariablen und Push-Aufrufen erstellen. Man kann class und ng-class mixen. Was unveränderlich ist, kann direkt in class stehen. Dann liegt da noch eine Funktion $scope.switchViewType rum, die ist ohne Funktion und kann vermutlich weg. Warum die Progress-Bar entsprechend der Datenanzahl wiederholt wurde, erschloss sich mir nicht. Ich hab das ng-repeat an der Stelle entfernt, weil es mir unsinnig erschien. Weiterhin hab ich den Code etwas mehr JSFiddle-gerecht umverteilt und vereinfacht.
dedlfix.
-
-