Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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';
}
like image 247
Georgi Angelov Avatar asked Jul 16 '13 16:07

Georgi Angelov


People also ask

Does AngularJS use one way data-binding?

No! AngularJS uses two way data binding.

What technique does AngularJS use for two way binding?

AngularJS creates a two way data-binding between the select element and the $ctrl. orderProp model. $ctrl. orderProp is then used as the input for the orderBy filter.

Which of the following global variable Cannot be directly accessed by Angular expression?

AngularJS expressions do not have direct access to global variables like window , document or location .


2 Answers

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>
like image 51
Chris Montgomery Avatar answered Oct 11 '22 23:10

Chris Montgomery


You can do this

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

In angular 1.2 a real ternary operator will be added.

like image 40
holographic-principle Avatar answered Oct 11 '22 23:10

holographic-principle