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}"
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()"
I use this code:
<buton class="audio-button {{audio.isPlaying && 'active'}}"></button
Is this practice are normal or it will make problems?
I assume that you want to add the active class if audio.isPlaying is true. In that case, you should be using ng-class.
<button class="audio-button" ng-class="{ 'active' : audio.isPlaying }"></button>
You can read more about it here
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 use following code snip.
<div data-ng-class="{ sel_style : $index!=0 && {{selClaz.row[$index].colorId }} == {{selClaz.row[$index-1].colorId }} }" >
Here what is done is, a CSS style is assigned to a div based on a condition. Also, 'selClaz.row' is iterated and if the current object's colorId value is equal to previous object, then the final boolean expression should be true. But this should not be executed for first iteration which is $index==0 . Therefore, a condition to avoid execution for first index, $index !=0 is added. But exception is thrown mentioning above line has syntax error. console further shows && for above && . So how can I fix this ? I use angular 1.3
Couple things wrong with your ng-class
-You need to wrap your class in quotes, due to the _
-You dont need {{}} in ng-class directive
data-ng-class="{ 'sel_style' : $index!=0 && selClaz.row[$index].colorId == selClaz.row[$index-1].colorId }"
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'))">