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.
Related
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
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'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'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}"
I'm a bit of an Angular novice an I'm struggling with something I thought would be very simple.
I have a template that is used in a read only version of a form in my app. This template displays a status field that would be styled (text/background colour) based on its value, e.g
'New issue' - orange
'In progress' - green
'Overdue' - red
etc...
My css is something like;
.status-bar {padding: 3px; border: solid 1px #333}
.new-issue {background-color: orange; color: #000}
.in-progress {background-color: green; color: #fff}
.overdue {background-color: red; color: #fff}
The issue status field is available through the controller and i use code something like this to display it.
<div class="status-bar">{{issue.status}}</div>
All works fine.
I then naively tried to simply insert the class name as an expression, e.g
<div class="status-bar {{issue.status}}">{{issue.status}}</div>
Thinking that would give me a this kind of output..
<div class="status-bar overdue">overdue</div>
But it doesn't work. I've looked at the ng-class directive, and other options but can't work this out.
Ideally I need a solution that would allow me to append/insert a class name based on a value (not a true/false like ng-class). So I'd like my oputput HTML to be like the following...
<div class="status-bar in-progress">In Progress</div>
OR
<div class="status-bar new-issue">New Issue</div>
OR
<div class="status-bar overdue">overdue</div>
etc...
The range of status values may change so my class names must be calculated as per the above pattern
e.g,
<div class="status-bar another-status">Another Status</div>
So I need a way to hyphenate and lowercase my issue.status value and then add it as a class name. I presume a directive is the way forward, which would be ideal so I can use it in other views.
This is so easy to do after the fact in jQuery etc..., but I can't see the 'Angular' way to do it?!
Many thanks upfront for any help provided...
ng-class with a custom filter is what you are looking for...
HTML
<h1 ng-class="class1">{{class1 | titleCase}}</h1>
JS
app.filter('titleCase', function () {
return function (input) {
var words = input.split('-');
for (var i = 0; i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join(' ');
}
});
and here is working PLUNKER...
ng-class should work :
<div class="status-bar" ng-class="issue.status">{{issue.status}}</div>
Working fiddle : http://jsfiddle.net/w2SFr/2/
What You are looking for is probably http://docs.angularjs.org/api/ng/directive/ngClass. You may also want to look at AngularJS ngClass conditional