Is it possible to combine a data-bind class and a conditional class in the same ng-class ?
Ex:
<div class="trow" ng-class="rowClass($index), data.accounts[k.id].checked ? 'checked' : '' " ng-repeat="k in accounts | filter:{location_id: location.id}">
This isn't working for me and neither
ng-class="{rowClass($index), data.accounts[k.id].checked ? 'checked' : '' }"
I want to have both classes, the data-binded rowClass($index) and also the conditional data.accounts[k.id].checked ? 'checked' : '' .
Use an array to combine the two:
ng-class="[rowClass($index), data.accounts[k.id].checked ? 'checked' : '' ]"
For more information, see AngularJS ng-class Directive API Reference.
Related
Here is an example of what I want to achieve
data-ng-class="{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name }"
but it doesn't work.
Use the array form for ng-class:
<div ng-class="[showTooltip ? 'tooltip_show' : '',
'tooltip__' + brand.settings.name]">
<div>
OR compute the class in JavaScript:
<div ng-class="computeClass(tooltip_show, brand.setting.name)">
</div>
$scope.computeClass(show, name) {
var obj = {};
obj.showTooltip = show;
obj['tooltip_'+name] = true;
return obj;
};
The later approach is more easily debugged and better for complex computation.
See also,
AngularJS ng-class Directive Reference - Known Issues
AngularJS Developer Guide - Why mixing interpolation and expressions is bad practice
It looks like you haven't set a value for the second item. Did you mean something like
{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name : tooltipText }
or
{ 'tooltip_show' : showTooltip , 'tooltip__' : brand.settings.name }
?
http://jsbin.com/genaqapefe/edit?html,js,output
data-ng-class="{ 'tooltip_show': showToolTip, {{ 'tooltip_' + brand.settings.name }}: true }"
This is working for me in this bin. I couldn't get it to evaluate without the curly braces, although not sure if that's the best practice.
I have scope variable
$scope.blur = 'blur';
and I have an element as :
<ion-content class="business-search-result" ng-class="showIcons ? 'category-page' : ''" on-tap="hideFloatingActions()">
Now how can i add my variable $scope.blur to ng-class so that ng-class will have two classes.....one from the expression and one from my variable?
I want :
<ion-content class="business-search-result" ng-class="blur showIcons ? 'category-page' : ''" on-tap="hideFloatingActions()">
but this is not working?
ng-class="[blur].concat(showIcons ? ['category-page'] : [])"
should do the trick. But maybe you should have that logic in the controller, and not in the view.
What about
ng-class="{blur: true, 'category-page': showIcons}"
I'm trying to use ng-class with a condition, like this:
<li ng-repeat="time in matter.times_hourly | filter:searchText" ng-class="{'time.write_off_class' : time.write_off === true, 'time.narrativeState' : time.write_off === false}" >
time.write_off_class has two classes inside it called "write_off_bg time_closed".
time.narrativestate has one class inside it called "time_closed"
time.write_off is a boolean.
So, I think my problem are the quotation marks.
I'm not sure where to put them, so I tried every possibility:
Quotes on condition:
`ng-class="{time.write_off_class : 'time.write_off === true', time.narrativeState : 'time.write_off === false'}"`
Result: Angular error.
`angular.min.js:107 `Error: [$parse:syntax] http://errors.angularjs.org/1.4.5/$parse/syntax?p0=.&p1=is%20unexpected%2C%…20%3D%3D%20true'%2C%20time.narrativeState%20%3A%20'time.write_off%20%3D%3DNaNalse'%7D&p4=.write_off_class%20%3A%20'time.write_off%20%3D%3D%20true'%2C%20time.narrativeState%20%3A%20'time.write_off%20%3D%3D%false'%7D
No quotes:
ng-class="{time.write_off_class : time.write_off === true, time.narrativeState : time.write_off === false}"
Result: Angular Error.
angular.min.js:107 Error: [$parse:syntax] http://errors.angularjs.org/1.4.5/$parse/syntax?p0=.&p1=is%20unexpected%2C%…f%20%3D%3D%20true%2C%20time.narrativeState%20%3A%20time.write_off%20%3D%3DNaNalse%7D&p4=.write_off_class%20%3A%20time.write_off%20%3D%3D%20true%2C%20time.narrativeState%20%3A%20time.write_off%20%3D%3D%false%7D
Quotes on everything (class and condition):
ng-class="{'time.write_off_class' : 'time.write_off === true', 'time.narrativeState' : 'time.write_off === false'}
Result: No error, but the element gets both classes, write_off_class AND narrativeState.
Quotes on classes :
ng-class="{'time.write_off_class' : time.write_off === true, 'time.narrativeState' : time.write_off === false}
Result: No error, and apparently the element gets the correct class (in this case, narrativeState, because at the beginning of the code all time.write_off are set to FALSE) BUT the element gets no style. If i put just ng-class="time.narrativeState" everything's ok, but if it gets it through the ng-class, then it is not working.
What am I doing wrong? Is there any reason for the element not styling through a condition with 'time.narrativeState' even when I'm sure it works by itself?
I've been trying more things and I know where the main problem is now, still cannot solve it.
My object 'time' has two fields inside that I use to give styling classes to some elements.
"time.narrativeState" has, for example, the class "time_closed" on it.
The thing is that, when I write ng-class="time.narrativeState" and I go to see the element's style, I can see "time_closed" BUT if I use instead the condition I was talking about in this question ng-class="{{ time.write_off ? time.write_off_class : time.narrativeState }}" > what the element gets as style is not "time_closed" it is literally "time.narrativeState" and because time.narrativeState is not a class but a object's field, it dosen't work.
Why it is getting "time.narrativeState" as the class and it's not looking INSIDE time.narrativestate to get the correct class "time_closed"???
You can use ternary operator inside simple interpolation tags:
ng-class="{{ time.write_off ? time.write_off_class : time.narrativeState }}"
I have two code examples that work good, but I don't understand the difference.
So, the first is:
AngularJS:
$scope.state = {presentation: true};
HTML:
<div ng-class="{{state.presentation}} ? 'on' : 'off'"></div>
And the second one:
AngularJS:
$scope.presentation = true;
HTML:
<div ng-class="presentation ? 'on' : 'off'"></div>
Why can't I use something like this in the 2-nd example:
<div ng-class="{{presentation}} ? 'on' : 'off'"></div>
When I use {{ }} with $scope.presentation = true; it doesn't work in ng-class, but I can use {{presentation}} like the text, I mean <div>{{presentation}}</div> and it works good. Why?
But with $scope.state = {presentation: true}; I can use {{presentation}} even in ng-class and it works good.
What the difference?
You should'nt use an expression inside a ng-attribute like that. And it will fail (without or without the state object) :
Error: [$parse:syntax] Syntax Error: Token '?' not a primary
expression at column 2 of the expression [ ? 'on' : 'off'] starting at
[? 'on' : 'off'].
That's normal because angularJs executes it as an angularJS expression, so when you're typing :
<div ng-class="presentation ? 'on' : 'off'"></div>
Internally angularJS executes it as an expression and it can be written also like that :
<div class="{{presentation ? 'on' : 'off'}}"></div>
Is it possible to use ngClass with an expression AND a class map? I want to conditionally add a class based on the existence of a variable as well as use that variable in the expression that creates the class.
For instance, if isActive() is true and getStatus() returns "valid" I want the class list to be "element element--active element--valid". If getStatus() returns undefined I want the class list to be "element element--active".
<div
class="element"
ng-class="{
'element--active': ctrl.isActive(),
'element--{{ ctrl.getStatus() }}': ctrl.getStatus()
}"></div>
Doesn't seem to work.
<div
class="element element--{{ctrl.getStatus()}}"
ng-class="{
'element--active': ctrl.isActive()
}"></div>
Works but then there's an extra hanging "element--" if getStatus() returns undefined.
Do I have to add a method in my controller to handle the class generation?
i'd suggest to make just one function call to get the classes. It will make it cleaner and have the class logic in one place.
In your controller:
this.getElementStatus = function(){
var rules = {active:this.isActive()}; //Prefix with element-- {element--active:}
rules[this.getStatus()] = true; //Prefix with element--, rules['element--' + this.getStatus()] = true
return rules;
}
and your view would just be:
<div
class="element"
ng-class="ctrl.getElementStatus()"></div>
It seems like your element-- is redundant with the rule instead make use of cascadeability(CSS) property. and define rules as :
Example:
.element.active{ /*....*/ }
.element.success {/*...*/}
.element.error{/*...*/}
This will help in maintenance, gets more verbose and get to the natural way of adding css rules and could remove these kind of complexities from the view.
You could as well do:
<div class="element"
ng-class="{'active': ctrl.isActive(), '{{ctrl.getStatus()}}':true}"
or :
<div class="element"
ng-class="[ctrl.isActive() ? 'active' : '', ctrl.getStatus()]"
If you don't mind getting a true added as a rule(should not affect anything anyways) then,
<div class="element"
ng-class="[!ctrl.isActive() || 'element--active' , 'element--' + ctrl.getStatus()]">
You can use class and ng-class map on the same element. But since your class name is dynamic you will have to something like this.
<div
ng-class="'element '
+ (ctrl.isActive() ? ' element--active' : '')
+ (ctrl.getStatus() ? ' element--' + ctrl.getStatus() : '')"></div>