Z AngularJS
Używam ng-class
następujący sposób:
<div class="bigIcon" data-ng-click="PickUp()"
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>
Zastanawiam się, czy mogę użyć tego if-else
wyrażenia, aby zrobić coś podobnego do tego:
<div class="bigIcon" data-ng-click="PickUp()"
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>
Więc ilekroć się call.State
różni first
lub second
używa classC
i unikacie podawania każdej wartości?
ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"
jak widać w powyższym pytaniumożesz spróbować użyć takiej funkcji:
Następnie umieść swoją logikę w samej funkcji:
Zrobiłem skrzypce na przykład: http://jsfiddle.net/DotDotDot/nMk6M/
źródło
Miałem sytuację, w której potrzebowałem dwóch stwierdzeń „jeśli”, które mogłyby się spełnić, i „innego” lub domyślnego, jeśli żadne z nich nie było prawdziwe, nie jestem pewien, czy to poprawa odpowiedzi Jossefa, ale wydawało mi się to czystsze:
Tam, gdzie wartość value.one i wartość.two są prawdziwe, mają one pierwszeństwo przed klasą .else
źródło
Wyraźnie ! Możemy wykonać funkcję zwracającą nazwę klasy CSS, podając pełny przykład.
CSS
JS
I wtedy
Możesz odwołać się do pełnej strony kodowej na ng-class, jeśli przykład
źródło
Powyższe rozwiązania nie działały dla mnie w przypadku klas z obrazami w tle. Stworzyłem domyślną klasę (potrzebną w innym) i ustawiłem class = 'defaultClass', a następnie ng-class = "{class1: abc, class2: xyz}"
PS: Klasy, które są w stanie, powinny zastąpić klasę domyślną, tj. Oznaczone jako! Ważne
źródło
To najlepszy i niezawodny sposób na zrobienie tego. Oto prosty przykład, po którym możesz opracować własną logikę:
źródło
Moim obejściem jest manipulowanie zmienną modelu tylko w celu przełączania klasy ng:
Na przykład chcę przełączać klasę zgodnie ze stanem mojej listy:
1) Ilekroć moja lista jest pusta, aktualizuję mój model:
2) Ilekroć moja lista nie jest pusta, ustawiam inny stan
3) Gdy moja lista nigdy nie zostanie zmieniona, chcę dać kolejną klasę (tutaj inicjowana jest strona):
3) Używam tego dodatkowego modelu w mojej klasie ng:
źródło
Użyj tego w ten sposób:
źródło
Możesz wypróbować tę metodę:
Można uzyskać pełne dane z tutaj .
źródło