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}"
Related
Below is the example of my custom directives
<div ng-if="activitedTab == 'individual-accounts'">
<ind-table tmodel="choosenInfo.section1.src" ttype="{{activitedTab}}" clickaction="popup"></ind-table>
</div>
How can i put a condition for the property clickaction so that this property could be included only if the value of scope variable contentLength is true. I tried below way.
<div ng-if="activitedTab == 'individual-accounts'">
<ind-table tmodel="choosenInfo.section1.src" ttype="{{activitedTab}}" ng-if="contentLength" clickaction="popup"></ind-table>
</div>
But if the value of contentLength become false then entire section is not displayed. I just want to exclude clickaction property if the value of contentLength is false.
Remove the ng-if condition from the custom directive and use the ternary operator as-
clickaction="contentLength > 0 ? popup : '' "
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.
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'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>