How to change opacity with ngstyle?

Question

I have in controller so far:

$scope.currentPage = 0; 

Now, without any additional code (method) in controller I want to set opacity 0.4 on image when currentPage ==0

So I wrote:

<div ng-controller="ctrlRead">   <div class="pagination no-margin ">     <ul>       <li ng-class="{disabled: currentPage == 0}">          <a href=""           ng-class="{disabled: currentPage == 0}">              <i class="icon-fast-backward"              ng-style="{opacity : (currentPage == 0)?'0.4':'1'}">              </i>         </a>       </li>     </ul>   </div> </div> 

But I get error:

Unexpected next character  at columns 29-29 [?] in expression [{opacity : (currentPage == 0)?'0.4':'1'}] 

Fiddle

Do I miss something?

Thank you,

[EDIT]

I can write ng-style="myOpacity"

and in controller:

$scope.myOpacity = {     'opacity': ($scope.currentPage == 0)?0.4:1 }; 

But it demands additional code in controller

Answer 1

Actually, AngularJS 1.1.5 has ternary operator (see https://github.com/angular/angular.js/commit/6798fec4390a72b7943a49505f8a245b6016c84b) so if you use a version >= 1.1.5 you should be able to use:

ng-style="{'opacity' : currentPage == 0 ? 0.4 : 1}" 

Answer 2

Update: Since version 1.1.5, Angular does have support for ternary operator in templates.

Angular does not have support for the ternary operator in templates. You can, however, use the poor man's ternary operator:

 ng-style="{opacity : ((currentPage == 0) && '0.4') || '1'}">