Ternary Operator in Angularjs Templates

Ternary operator in AngularJS templates

Update: Angular 1.1.5 added a ternary operator, so now we can simply write

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

If you are using an earlier version of Angular, your two choices are:

1. (condition && result_if_true || !condition && result_if_false)
2. {true: 'result_if_true', false: 'result_if_false'}[condition]

item 2. above creates an object with two properties. The array syntax is used to select either the property with name true or the property with name false, and return the associated value.

E.g.,

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

$first is set to true inside an ng-repeat for the first element, so the above would apply class 'myClass1' and 'myClass2' only the first time through the loop.

With ng-class there is an easier way though: ng-class takes an expression that must evaluate to one of the following:

1. a string of space-delimited class names
2. an array of class names
3. a map/object of class names to boolean values.

An example of 1) was given above. Here is an example of 3, which I think reads much better:

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

The first time through an ng-repeat loop, class myClass is added. The 3rd time through ($index starts at 0), class anotherClass is added.

ng-style takes an expression that must evaluate to a map/object of CSS style names to CSS values. E.g.,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

ternary operator to variable in angularJS

Something like this in your controller should do the trick(assuming 'usuarios' is a scoped var). But like @charlietfl suggested would be a good opportunity for a directive.

$scope.assignValue = function(meta) {
  return (meta.pagCidadesPagCid[0].pagCidId) ? usuarios[meta.pagCidadesPagCid[0].pagCidId].qtd : usuarios.total.qtd * (100 / meta.admMetValor);
};

<tr ng-repeat="meta in metas">
  <td class="mdl-data-table__cell--non-numeric">
    {{meta.admMetNome}} <span class="pull-right">{{meta.pagCidadesPagCid[0].pagCidId ? usuarios[meta.pagCidadesPagCid[0].pagCidId].qtd : usuarios['total'].qtd}} / {{meta.admMetValor}}</span>
    <md-progress-linear md-mode="determinate" value="assignValue(meta)">
    </md-progress-linear>
    {{(meta.pagCidadesPagCid[0].pagCidId ? usuarios[meta.pagCidadesPagCid[0].pagCidId].qtd : usuarios['total'].qtd) * 100 / meta.admMetValor | number:2}}% - Prazo: de {{meta.admMetInicio | date: 'dd/MM/yyyy'}} a {{meta.admMetFim | date: 'dd/MM/yyyy'}}
  </td>
</tr>

Conditionally show content in AngularJS templates using ternary operators

Can you try

<ons-button ng-show='x.status === "pending"' ng-click="setCard(x); page.pushPage('verifyCard.html', {animation: 'slide'});">Verify <ons-icon icon="ion-checkmark"></ons-button>

ng-show documentation here

Using ternary operator in angularjs to set an attribute on an element

Try using

<button ng-disabled="ctrl.myService.getData().someProperty ? 'disabled': '' ">
   My button
</button>

Ternary operator for values in Angular 2+ template

You can use Conditional (ternary) operator, inside of template like below example

 <span> {{selectedSport.key === 'walking' ? 'steps' : 'km'}} </span>

{{ !$last && ', ' || '.'}} is this working as ternary operator or if-else condition

It is a form of ternary operator. && returns first operand if it is a falsy value and second operand if first operand is truthy e.g. 1 && 3 will return 3 but 0 && 3 will return 0. Second operator is not evaluated if first is falsy. || is similar but returns first operand if it is truthy and second operand if first is falsy.

So basically cond && val1 || val2 is equivalend to cond ? val1 : val2 under condition that val1 is truthy value. If this is not the case e.g. cond && 0 || 1 this will always return last value 1 in this case.

For readability reasons you should always prefer ternary opreator ?: than boolean shortcircuting operators.

Angular formatting date within Ternary Operator in Template Binding

Try (I assumed moment is a defined filter):

<td>{{item.CompletedDate ? (item.CompletedDate | moment : 'lll') : ''}}</td>

Angularjs : using html elements within ternary operators

I think instead of using ternary operation you can use ng-if

<tbody ng-repeat="report in data">
<tr ng-if="report.resourceId !== data[$index-1].resourceId">

 <td>{{report.reportId}}</td>
 <td>{{report.resourceId}}</td>
 <td>{{report.reason}}</td> 
</tr>
<tr ng-if="report.resourceId === data[$index-1].resourceId">
   <td></td>
<tr>
</tbody>

Demo

angular.module("app",[]).controller("ctrl",function($scope){
$scope.arr = {data: [  {   reportId: "12",   resourceId: "16241",   reason: null  },  {   reportId: "18",   resourceId: "26387",   reason: "It is biased or written by someone in the company"  },  {   reportId: "19",   resourceId: "26387",   reason: "It is irrelevant"  }]}})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="app" ng-controller="ctrl"><table> <tbody ng-repeat="report in arr.data"><tr ng-if="report.resourceId !== arr.data[$index-1].resourceId">
  <td>{{report.reportId}}</td> <td>{{report.resourceId}}</td> <td>{{report.reason}}</td> </tr><tr ng-if="report.resourceId === arr.data[$index-1].resourceId">   <td></td><tr></tbody></table></div>

condition && (answer if true) || (answer if false)

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

{{myVar === "two" ? "it's true" : "it's false"}}

<span title="{{isOk ? 'Is Ok' : 'Is Not Ok'}}"></span>