Відповіді:
Оновлення : Angular 1.1.5 додав потрійний оператор , тому тепер ми можемо просто написати
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">Якщо ви використовуєте більш ранню версію Angular, ваші два варіанти:
(condition && result_if_true || !condition && result_if_false){true: 'result_if_true', false: 'result_if_false'}[condition]пункт 2. вище створює об’єкт з двома властивостями. Синтаксис масиву використовується для вибору властивості з ім'ям true або властивості з ім'ям false та повернення пов'язаного значення.
Наприклад,
<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>
$ first встановлюється вірно всередині ng-повтору для першого елемента, тому вищезазначені застосовуватимуть клас 'myClass1' та 'myClass2' лише вперше через цикл.
Однак для ng-класу є простіший спосіб: ng-class приймає вираз, який повинен оцінювати по одному з наступних:
Приклад 1) наведено вище. Ось приклад 3, який, на мою думку, читається набагато краще:
<li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>Перший раз через цикл ng-повторів додається клас myClass. Третій раз через (індекс $ починається з 0) додається клас otherClass.
ng-style приймає вираз, який повинен оцінювати карту / об'єкт імен стилів CSS до значень CSS. Наприклад,
<li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>ng-styleоновлення, але воно, схоже, оцінюється лише при вперше наданому елементі. (Кутовий ноб тут)
Оновлення: Кутовий 1.1.5 додав потрійний оператор, ця відповідь правильна лише для версій, що передували 1.1.5. З 1.1.5 та пізніших версій див. Прийняту відповідь.
Перед кутовим 1.1.5:
Форма трикутника у angularjs така:
((condition) && (answer if true) || (answer if false))Прикладом може бути:
<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>або:
<li ng-disabled="currentPage == 0" ng-click="currentPage=0" class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>На сьогодні всі ми з'ясували, що версія 1.1.5 має функцію належного потрійця, $parseтому просто використовуйте цю відповідь як приклад фільтрів:
angular.module('myApp.filters', [])
.filter('conditional', function() {
return function(condition, ifTrue, ifFalse) {
return condition ? ifTrue : ifFalse;
};
});А потім використовувати його як
<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>Ось це: потрійний оператор доданий до кутового аналізатора в 1.1.5 ! дивіться журнал змін
Ось загадка, що показує нового потрійного оператора, який використовується в директиві класу ng.
ng-class="boolForTernary ? 'blue' : 'red'"Хоча ви можете використовувати condition && if-true-part || if-false-part-синтаксис у старих версіях angular, звичайний потрійний оператор condition ? true-part : false-partдоступний у Angular 1.1.5 і пізніших версіях .
<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>Кнопка перемикає та змінює заголовок кнопки та показує / приховує подільну панель. Дивіться Плункр