AngularJS - Can I use data binding value depending on ternary operator

Question

I have an ng-repeat li elements and I want to set a specific value for that li depending on whether a function returns true or false and I don't want to do it in the controller because I have dependency issues where it makes it Minimize or Maximize for ALL li elements but I want it to be for each individual li element. I tried using several things including the following without any luck. I am not sure what I am doing wrong but I would appreciate any input or any other way of doing this.

object1 is from an ng-repeat that includes this li element.

<li><a tabindex="-1" ng-click="setHidden(object1)">{isItHidden(object1) ? 'Minimize' : 'Maximize'}</a></li>

SOLUTION (thanks to jdp)

<li><a tabindex="-1" ng-click="setHidden(object1)">{{isItHidden(object1)}}</a></li>

$scope.isItHidden = function(object){
    return object.hidden ? 'Maximize' : 'Minimize';
}

kindly share complete html and js file object1 is not visible in the code — Ajay Beniwal, Jul 16 '13 at 17:46
You can't do logic like that in a view. Why couldn't you have `$scope.isItHidden(obj)` return either 'Minimize' or 'Maximize? If you're passing in the specific object as a function parameter there shouldn't be any interference. Could you share your controller and some sample data? — jdp, Jul 16 '13 at 17:46

score 33 · Answer 1 · answered Jun 09 '14 at 14:42

33

With the release of angular 1.2, you can now use the more intuitive ternary operator inside ng-bind

<a ng-bind="object1.hidden ? 'Maximize' : 'Minimize'"></a>

or inside brackets

<a>{{ object1.hidden ? 'Maximize' : 'Minimize' }}</a>

answered Jun 09 '14 at 14:42

Chris Montgomery

2,284
1
16
30

score 12 · Accepted Answer · answered Jul 16 '13 at 19:00

12

You can do this

{{ object1.hidden && 'Minimize' || 'Maximize' }}

In angular 1.2 a real ternary operator will be added.

answered Jul 16 '13 at 19:00

holographic-principle

19,590
10
44
62

Thanks! What I was looking for. – Georgi Angelov Jul 16 '13 at 19:09
1

Now when 1.2 is released, the ternary operator is described here http://stackoverflow.com/questions/12008580/a-ternary-in-angular-templates-angularjs – Simon Bengtsson Jan 06 '14 at 21:04
Can i also pass the value like this --> {{ object1.hidden && '{{value1}}' || '{{value2}}' }} ? – kapiljain123 Nov 05 '18 at 18:36

AngularJS - Can I use data binding value depending on ternary operator

2 Answers2

Linked