I'm wondering if it's possible to use a ternary expression in the ng-click attribute. I don't want to use a separate controller function if possible.
It's a two button toggle setup - I can get a simple toggle working, but don't want a second click of the "off" button to turn back on.
The ternary in ng-click does not work (note the ternary in ng-class does work):
<button
ng-click="allOn2==true ? allOn2 : !allOn2"
ng-class="allOn2==true ? 'btn-green-on' : 'btn-green-off'">
ON</button>
Here's a more complete jsfiddle:
toggler
You are not doing anything with the ternary expression. For it to be useful, assign it:
{{ var1 }} {{ var2}}
<button
ng-click="var1 = (allOn2==true ? allOn2 : !allOn2)"
ng-class="{'btn-green-on':allOn2, 'btn-green-off' : !allOn2}">
ON</button>
I'm not sure how you can use ternary expressions for ng-class though...
You can use something as as a workaround for ternary
ng-click="(AppliedApps!=null && Collapse('CollapsedAppliedApplications')) ||
(AppliedApps.length==0 && Collapse('CollapsedAppliedApplications'))">
Related
It's possible to use a ternary operator inside a ng-repeat directive? For example, in certain case I want to load a list instead another, depending of the value of a variable or flag:
ng-repeat="$ctrl.darkMode == true ? item in $ctrl.darkList : item in $ctrl.normalList
Thanks in advance...
this way no, but you can do it like this:
ng-repeat="item in ($ctrl.darkMode == true ? $ctrl.darkList : $ctrl.normalList)"
If your conditions become complicated, you may always use method:
ng-repeat="item in $ctrl.getList()"
Is it ok to write this?
<button href="#" ng-class="{'disabled' : form.mail.$invalid && form.firstName.$invalid }"></button>
I thought it was right, but it doesn't work. I have a form, and I need to disable the Send button if these conditions aren't ok.
If I write only one condition, it works.
You can simply use (, ) on your condition:
ng-class="{'disabled': (form.mail.$invalid && form.firstName.$invalid)}"
JSFiddle for demo
As a side note, as far as I know your code should works well.
You should pass the ng-disabled attribute to the button with the proper expression. Not seeing your code, something along the lines of:
<button ng-disabled="form.mail.$invalid && form.firstName.$invalid ">... </button>
I add a class another-class based on condition as follows using ng-class.Is it possible to remove that another-class using ng-class when the condition is not met? Right now the class another-class just remains in the element even when the condition is not met!
<div ng-hide="ok.isTrue" ng-class = "'{{ok.Id}}' === '{{notok.Id}}' ? 'another-class': '' ;" class="some-class">
You can use different ng-class syntax for this, particularly the map syntax:
ng-class="{'another-class': ok.Id === notok.Id}"
Would this be correct if I need to use one time binding for a ternary condition inside data-ng-bind directive?
<span data-ng-bind="::model.boolean ? 'json.item.value1' : 'json.item.value2'"></span>
or
<span data-ng-bind="::(model.boolean ? 'json.item.value1' : 'json.item.value2')"></span>
Yes. The whole expression, whatever it is, will be parsed and read once.
What will happen internally would be equivalent to:
// If not bound
value = $parse("model.boolean ? 'json.item.value1' : 'json.item.value2'")(scope)
Note: If model.boolean is true, you will actually see the string "json.item.value1" and not the real value it contains. If you want to evaluate that, you need to remove the single quotes ' so it becomes:
<span data-ng-bind="::model.boolean ? json.item.value1 : json.item.value2"></span>
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';
}
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>
You can do this
{{ object1.hidden && 'Minimize' || 'Maximize' }}
In angular 1.2 a real ternary operator will be added.