Hi am not aware of angularjs that much.On my page load am defining an scope value as true/false based on location.hash.
if(location.hash=='#en'){
$scope.selectedLang=true;
}
else{
$scope.selectedLang=false;
}
when selectedLang is true I need to add active class to the a element in li. when slectedLang is false I need to remove active class in a element.
<li><a href="#eng" >english</a></li>
<li><a href="#hin" >hindi</a></li>
By default selectedLang should be true.How can I get it?Any help please?
You need to use ng-class like this,
<li>english</li>
<li>hindi</li>
If you want to have styles directly instead of classes, you need to use like this,
<li>english</li>
<li><a href="#hin" ng-style="{ color : selectedLang ? 'blue' : '#ddd', background: selectedLang ? 'red' : '#fff'}" >hindi</a></li>
And set selectedLang = true by default
$scope.selectedLang=true;
if(location.hash != '#en'){
$scope.selectedLang=false;
}
you can use the ternary operator with ng-class as following
english
Reference
Related
How can I use ng-class to add a Css class where I put display: none; when the user is log in?. I'm using mean.js so I first tried using
ng-show="authentication.user"
But that only makes the element to hide like visivility : hidden;
Besides I need to add other classes in elements that i keep rather if the user is logged or not where I change margins and other stuff.
I tried using in angular a condition:
$scope.logged = false;
if ($scope.authentication.user) {
$scope.logged = true;
}
and then adding the ng-class condition like this:
ng-class="logged ? 'myClass1' : 'myClass2'"
But it failed, what am I doing wrong?
ng-if="authentication.user"
will remove the element altogether unlike ng-show which hides it.
With AngularJS, the right syntax is :
ng-class="{ className : Boolean}"
A example with multiple classes from AngularJS documentation :
ng-class="{strike: deleted, bold: important, 'has-error': error}"
Or with a function :
ng-class="{ invalid : !form.validPassword()}"
Hope this will help.
View:
<a ng-repeat="control in controls | filter:name" ng-href="#{{control.id}}" ng-click="restart(control.name)" ng-class="{active: control.name == selected}">{{control.name}}
controller- app.js
$scope.restart = function (controlName) {
$scope.selected = controlName;
}
Here i have added the active class while clicking.how can i add the hover class using mouseover and remover the class using mouse-leave.
As suggested above, use ng-class with ng-mouseover and ng-mouseleave:
<div ng-class="class" ng-click="class='active'" ng-mouseover="class='hovering'" ng-mouseleave="class=''"></div>
This way, you'll have 3 event listener to a single variable (in a mutually exclusive way).
If you want to have both at the same time, use an array this way:
<div ng-class="[classClick, classHover]" ng-click="classClick='active'" ng-mouseover="classhover='hovering'" ng-mouseleave="classHover=''"></div>
Use ng-class, ng-mouseover anf ng-mouseleave:
<div ng-class='{"classtoadd": add, "active": click, "hover": hover}' ng-mouseover="add=true;" ng-mouseleave="add=false" ng-click="click = true" ng-mouseover="hover = true"></div>
Thanks for your response. i want to add 'active' class while clicking.and i want add the add the class' hover' while 'hovering'
I have this: http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview
How can i add class "active-link" on:
#Translate("PERSONAL_INFORMATION")
#Translate("NOTIFICATIONS")
#Translate("CHANGE_PASSWORD")
#Translate("GAME_SETTINGS")
If your using classes like active-link, x-y which have dash (-) then you have to wrap it in ' as below.
ng-class="{'active-link' : activeLink==='PersonalInfo'}"
if your classes like activeLink which are doesn't have dash (-) then you can avoid from ' but not a must.
ng-class="{activeLink : activeLink==='PersonalInfo'}"
here is the updated DEMO
Add an ng-class to your element
<div ng-click="setClass()" ng-class="class">#Translate("NOTIFICATIONS")</div>
and change the value in your function
$scope.setClass(new function(){
$scope.class = "active-link";
})
I'm trying to add two classes to this div using ng-class, but even though checkForActive is returning true, it's being ignored and only class_{{$index}} is getting added.
If I remove class_{{$index}} altogether, active is added correctly.
Is there an obvious mistake in my syntax here?
<div "ng-class="{active: checkForActive, disabled: checkForDisable, class_{{$index}}} "></div>
You could just provide true value to the key class_{{$index}} just to that property gets added as a class name to the class list of the element. It is just the way you do active: checkForActive.
i.e
{active: checkForActive, disabled: checkForDisable, class_{{$index}} :true}
But i believe there could be some undesired behavior due the usage of interpolation ({{) within the ng-class directive (Atleast used to happen with older versions). So you could as well use an array.
ng-class="[checkForActive && 'active' , checkForDisable && 'disabled', 'class_' + $index]"
The above method will add a class name false if active or disabled is false, which should be harmless.
Or pass index to a controller function say getStatus($index) and return the object from there and use it in the ng-Class directive.
$scope.getClass = function(){
var obj = {active: $scope.checkForActive, disabled: $scope.checkForDisable};
obj['class_' + this.$index] = true;
return obj;
}
and
ng-class="getClass()"
#Okazari pointed out that it indeed works by mixing class with ng-class so you could also do:
class="class_{{$index}}" ng-class="{active: checkForActive, disabled: checkForDisable}"
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>