How do you do a ternary with AngularJS (in the templates)?
It would be nice to use some in html attributes (classes and style) instead of creating and calling a function of the controller.
This question is related to
javascript
html
angularjs
ternary-operator
Update: Angular 1.1.5 added a ternary operator, this answer is correct only to versions preceding 1.1.5. For 1.1.5 and later, see the currently accepted answer.
Before Angular 1.1.5:
The form of a ternary in angularjs is:
((condition) && (answer if true) || (answer if false))
An example would be:
<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>
or:
<li ng-disabled="currentPage == 0" ng-click="currentPage=0" class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>
This answer predates version 1.1.5 where a proper ternary in the $parse
function wasn't available. Use this answer if you're on a lower version, or as an example of filters:
angular.module('myApp.filters', [])
.filter('conditional', function() {
return function(condition, ifTrue, ifFalse) {
return condition ? ifTrue : ifFalse;
};
});
And then use it as
<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>
<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>
Button toggle and change header of button and show/hide div panel. See the Plunkr
There it is : ternary operator got added to angular parser in 1.1.5! see the changelog
Here is a fiddle showing new ternary operator used in ng-class directive.
ng-class="boolForTernary ? 'blue' : 'red'"
For texts in angular template (userType
is property of $scope, like $scope.userType):
<span>
{{userType=='admin' ? 'Edit' : 'Show'}}
</span>
While you can use the condition && if-true-part || if-false-part
-syntax in older versions of angular, the usual ternary operator condition ? true-part : false-part
is available in Angular 1.1.5 and later.
Source: Stackoverflow.com