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()"
Related
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'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'))">
I have an element:
I'd like to use
ng-class="{ 'children'+level.length }" (or something like this, i.e to output a class that has the number of levels. Is it possible to do it on this iterating element?
Yes, something like:
<div ng-repeat="level in levels">
<p ng-class="{'children' : level.length == 1}">test</p>
</div>
ng-class simply takes an expression.
I think the easiest way is to use a function in your ng-class.
$scope.levelClass = function(i){
return "level"+i;
}
and then
ng-class="levelClass(children.level)"
Check out this question for other solutions
Generating variable for ng-class dynamically using Expression in AngularJs
I am trying to combine the following two ng-class ternary expressions into one ng-class (so I can control both the color, via btn-success/danger classes, and the width, via width-small/medium/wide class, of my button divs
<div class="btn" ng-class="(rate > 0) ? 'btn-success' : 'btn-danger'">{{rate}}</div>
<div class="btn" ng-class="(priority == 'low') ? 'width-small' : (priority == 'medium') ? 'width-medium' : 'width-wide'">{{rate}}</div>
I realize I could just do something along the lines of below; however, I would like to make use of the ternary expressions available in 1.1.5
<div class="btn" ng-class="{'btn-success': rate > 0, 'btn-danger': rate <= 0, 'width-small': priority == 'low', 'width-medium': priority == 'medium', 'width-wide': prioity == 'high'}">{{rate}}</div>
Space separating the expressions did not work for me, nor did comma separating them within ng-class
Thanks advance for your assistance in determining if/how to have multiple ternary expressions in a single ng-class
For anyone looking for the answer: Yes this is indeed possible, also as mentioned the readability is questionable.
<div ng-class="(conversation.read ? 'read' : 'unread') + ' ' + (conversation.incoming ? 'in' : 'out')"></div>
From the ngClass documentation:
The directive operates in three different ways, depending on which of >three types the expression evaluates to:
If the expression evaluates to a string, the string should be one or >more space-delimited class names.
If the expression evaluates to an array, each element of the array >should >be a string that is one or more space-delimited class names.
If the expression evaluates to an object, then for each key-value pair of >the object with a truthy value the corresponding key is used as a class >name.
Option 1 applies here.
From my understanding using this method will result in 2 watches while using object notation will result in 4, but I might be wrong on this one.
I think you'd rather use a filter. You could write a rateToClass filter that would hold the logic and transform your rate in the class name that you want.
You could also put a rateToClass(rate) function in your scope, but it's ugly.
If you insist on having your logic in the view,
ng-class support multiple classes by using an object (see official doc first example, line 7):
<p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>
You can have more complexe expression like ng-class='{btn-success: rate > 0}'.
It is possible to add multiple ternary expressions on a single ng-class directive by putting each of the expressions into an array, as items of this array.
Example :
<div ng-class="[
expression1 ? 'class1' : 'class2',
expression2 ? 'class3' : 'class4'
]">