Odpowiedzi:
Aktualizacja : Angular 1.1.5 dodał operator trójskładnikowy , więc teraz możemy po prostu pisać
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">Jeśli używasz wcześniejszej wersji Angulara, masz dwie możliwości:
(condition && result_if_true || !condition && result_if_false){true: 'result_if_true', false: 'result_if_false'}[condition]punkt 2. powyżej tworzy obiekt o dwóch właściwościach. Składnia tablicowa służy do wyboru właściwości o nazwie true lub właściwości o nazwie false i zwracania powiązanej wartości.
Na przykład,
<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>$ first jest ustawione na true w powtórzeniu ng dla pierwszego elementu, więc powyższe zastosuje klasy „myClass1” i „myClass2” tylko za pierwszym razem przez pętlę.
Z klasą ng jest jednak łatwiejszy sposób: klasa-ng przyjmuje wyrażenie, które musi być ocenione na jedno z poniższych:
Przykład 1) podano powyżej. Oto przykład 3, który moim zdaniem brzmi znacznie lepiej:
<li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>Za pierwszym razem poprzez pętlę powtarzania ng dodawana jest klasa myClass. Za trzecim razem ($ index zaczyna się od 0), klasa anotherClass jest dodawana.
ng-style przyjmuje wyrażenie, które musi być przetwarzane na mapę / obiekt nazw stylów CSS na wartości CSS. Na przykład,
<li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>ng-stylezaktualizować, ale wydaje się, że jest oceniany tylko przy pierwszym renderowaniu elementu. (Angular noob tutaj)
Aktualizacja: Angular 1.1.5 dodał operator trójskładnikowy, ta odpowiedź jest poprawna tylko dla wersji wcześniejszych niż 1.1.5. W wersji 1.1.5 i nowszych zobacz aktualnie przyjętą odpowiedź.
Przed Angular 1.1.5:
Forma trójki w angularjs jest:
((condition) && (answer if true) || (answer if false))Przykładem może być:
<ul class="nav">
<li>
<a href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
</li>
<li>
<a href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
</li>
</ul>lub:
<li ng-disabled="currentPage == 0" ng-click="currentPage=0" class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>Do tej pory wszyscy odkryliśmy, że wersja 1.1.5 ma odpowiednią trójkę w $parsefunkcji, więc użyj tej odpowiedzi jako przykładu filtrów:
angular.module('myApp.filters', [])
.filter('conditional', function() {
return function(condition, ifTrue, ifFalse) {
return condition ? ifTrue : ifFalse;
};
});A następnie użyj go jako
<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>Oto on: operator trójkowy został dodany do parsera kątowego w 1.1.5 ! zobacz dziennik zmian
Oto skrzypce pokazujące nowego trójskładnikowego operatora stosowanego w dyrektywie klasy ng.
ng-class="boolForTernary ? 'blue' : 'red'"Chociaż możesz używać condition && if-true-part || if-false-part-syntax w starszych wersjach angular, zwykły operator trójskładnikowy condition ? true-part : false-partjest dostępny w Angular 1.1.5 i nowszych .
<body ng-app="app">
<button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'" class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
<div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
<div class="panel-heading">Take Quiz</div>
<div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">
<button type="button" class="btn btn-default">Start Quiz</button>
</div>
</div>
</body>Przycisk przełącza i zmienia nagłówek przycisku oraz wyświetla / ukrywa panel div. Zobacz Plunkr