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.
- 1Why there are two values inside one ng-class for 'tooltip_show' ?Vivz– Vivz2017-07-14 13:18:25 +00:00Commented Jul 14, 2017 at 13:18
- I need have one class which depends on showTooltip, and other which depends on this variable brand.settings.name. Can i do this in another way?madyar13– madyar132017-07-14 14:00:24 +00:00Commented Jul 14, 2017 at 14:00
- As @harriyot mentioned . this should suffice { 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name : tooltipText }Vivz– Vivz2017-07-14 14:01:37 +00:00Commented Jul 14, 2017 at 14:01
- This doesn't work.madyar13– madyar132017-07-14 14:09:34 +00:00Commented Jul 14, 2017 at 14:09
- What is happening? Do you get any errors? Can you post more code on how you are trying to achieve this?Vivz– Vivz2017-07-14 14:10:09 +00:00Commented Jul 14, 2017 at 14:10
| Show 1 more comment
3 Answers
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,
1 Comment
Arigi Wiratama
Yeah this is what I think you can do @стас Пилипко, nice answer georgeawg :+1:
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 } ?
1 Comment
madyar13
'tooltip__' + brand.settings.name - when i write only this part, i receive somerthing like this class="tooltip__class". brand.settings.name - it is variable and depends on the page.
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.
4 Comments
kauffmanes
@ стас Пилипко or did you want it to always show that? You could just use a class, like:
class="{{ 'tooltip_' + brand.settings.name }}" data-ng-class="{ 'tooltip_show': showToolTip }"
georgeawg
You should not use interpolation in the value of the
class attribute, when using the ngClass directive on the same element. See AngularJS ng-class Directive Reference - Known Issues.kauffmanes
@georgeawg yeah, you're right. I think a better answer to this question would probably be to restructure how the property is built to begin with. As in, not in the HTML but maybe in the Javascript.