Was ist der beste Weg, um bedingt eine Klasse anzuwenden?

Question

Sagen wir, Sie haben ein Array, das in einem ul mit einem li für jedes Element und einer Eigenschaft auf dem Controller namens selectedIndex gerendert wird. Wie könnte man am besten eine Klasse zu dem li mit dem Index selectedIndex in AngularJS hinzufügen?

Derzeit dupliziere ich (manuell) den li-Code und füge die Klasse zu einem der li Tags hinzu und benutze ng-show und ng-hide, um nur ein li pro Index anzuzeigen.

Answer 1

Überprüfen Sie dieses.

Die berüchtigte AngularJS if|else Anweisung!!!
Als ich anfing, AngularJS zu verwenden, war ich ein wenig überrascht, dass ich keine if/else Anweisung finden konnte.

Also arbeitete ich an einem Projekt und bemerkte, dass bei Verwendung der if/else-Anweisung die Bedingung während des Ladens angezeigt wird. Sie können ng-cloak verwenden, um dies zu beheben.

 Zeige diese Zeile
 Zeige stattdessen diese Zeile

.ng-cloak { display: none }

Danke amadou

Answer 2

Sie können dieses npm-Paket verwenden. Es behandelt alles und verfügt über Optionen für statische und bedingte Klassen basierend auf einer Variablen oder einer Funktion.

// Unterstützung für Zeichenfolgenargumente
getClassNames('Klasse1', 'Klasse2');

// Unterstützung für Objekte
getClassNames({Klasse1: true, Klasse2: false});

// Unterstützung für alle Arten von Daten
getClassNames('Klasse1', 'Klasse2', ['Klasse3', 'Klasse4'], { 
    Klasse5: function() { return false; },
    Klasse6: function() { return true; }
});

Answer 3

Ich verstehe, dass diese Frage für Angular ist, aber wenn jemand React oder ein React-basiertes Framework (Amplify, NextJS, Serverless, usw.) verwendet, ist die Lösung deutlich einfacher. Der performanteste Weg ist mit einem ternären Operator wie folgt:

Sie können diese Strategie verwenden, um den Baum zu animieren, wenn Sie useState() verwenden, da jedes Mal, wenn sich der Zustand ändert, diese Bedingung mit dem neuen Wert neu geladen wird.