So implementieren Sie Farbänderungen in Angular

In diesem Artikel wird hauptsächlich der Kerncode zum Klicken auf das li-Tag in Angular vorgestellt, um die Farbe zu ändern. Freunde in Not können darauf verweisen

Klicken Sie nach dem Durchlaufen von ng-repeat auf das li-Tag, um die Rahmenfarbe zu ändern.

HTML-Code:

<ul ng-if="params.questionTypeId == 8">
<li class="gamePre-def" ng-repeat=" word in wordsDef" ng-click=&#39;li_click($index)&#39;
ng-class=&#39;{focus: $index == focus}&#39;> {{word}}</li>
</ul>

js-Code:

$scope.li_click = function (i) {
$scope.focus = i;
};

Beschreibung:

① Im Click-Ereignis des < li > wird die im $scope-Objekt hinzugefügte Methode „$index (Zeilennummer)“ ausgeführt value)“ wird ausgeführt. Übergeben Sie es als tatsächlichen Parameter an die Methode und setzen Sie den Attributwert „focus“ auf den Wert „$index“.

③ Wenn daher eine Zeile von < li > Wenn auf das Element geklickt wird, ändert sich der Wert des Attributs „focus“ in den entsprechenden Wert „$index“. ④ Zu diesem Zeitpunkt gibt die Stilanweisung „ng-class“ des Elements < Das muss dem Element über das Schlüssel-/Wertobjekt hinzugefügt werden. Da der Wert der Variable „$index“ mit dem Wert des Attributs „focus“ übereinstimmt, bedeutet dies, dass der Rückgabewert von „$index==focus“ ist wahr;

⑤ Sie sollten zu diesem Zeitpunkt verstehen, dass sich der Stilanweisungswert von „ng-class“ in „focus“ ändert;

⑥Nach der obigen Analyse und Betrieb haben wir den Effekt erreicht, dass beim Klicken auf das < li >-Element ein Rahmen hinzugefügt wird für alle. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie 3D-Kino mit three.js

So implementieren Sie die seitlich verschiebbare Menükomponente in Vue

So implementieren Sie die mehrseitige Entwicklung im Webpack

Standardverarbeitungsmethode in Vue (ausführliches Tutorial)

So stellen Sie https mit Nginx + Node bereit

So implementieren Sie die numerische Tastaturkomponente mit Vue

Detaillierte Interpretation von Vater-Sohn Kommunikation in Vue

Detaillierte Einführung in die Verwendung von ref ($refs) in Vue.js

$refs greift auf das DOM in Vue zu ( ausführliches Tutorial)

So implementieren Sie den Sliding-Ban-Effekt auf der unteren Seite unter dem Popup-Fenster in jQuery

So implementieren Sie ein Attribut Bestätigung mithilfe von Prop-Typen in React Native

Bootstrap-Grid-System (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Farbänderungen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!