All Questions
Tagged with angularjs-ng-class or ng-class
938 questions
0
votes
1
answer
1k
views
AngularJS ngClass not working in ngRepeat in custom directive inside ngRepeat
Here's a plunker:
http://plnkr.co/edit/hJsZFCBZhFT5rRo1lgSZ?p=preview
It's a simple directive that is supposed to show a given number of dots and highlight a subset of them based on the value, min, ...
- 3
2
votes
1
answer
5k
views
Angular js - ng-class="" with simple condition won't work
Hi, i'm trying to add a class to an element via ng-class. As you can see, the code is very simple but it doesn't add the class:
app.run(function($rootScope, $location,$http,ngDialog,array_helper){
...
- 50k
0
votes
0
answers
388
views
Change multiple button classes depending on condition
I'm building a multiple-choice question web app. There are 5 options for every question. Before a button is clicked it has a default button class: btn btn-default. At the moment I have it so that when ...
- 189
22
votes
2
answers
26k
views
ng-animate with ng-class directive
You can use ng-animate with ng-class with the add and remove animations. I'm looking to make one animation in CSS3 but haven't found good examples with ng-class online. So I was wondering if people ...
- 7,279
0
votes
2
answers
848
views
AngularJS: ng-class - Using multiple classes?
I am new to AngularJS.
I want to add a class to the second column based on it's value. Example: I want add the class 'positive' if the value is > 0 and class 'negative' when it is < 0.
What I am ...
- 1,518
1
vote
2
answers
335
views
Is there a way to mix angular class directive with Boolean and ternary expression?
I'm trying to write a mix of ternary and Boolean expression in the angular class (ng-class) directive. but I can't find the right syntax to make it work, or find a decent example on the web.
I know ...
- 846
1
vote
0
answers
536
views
show/hide transition not triggering properly because of ng-animate
Angularjs 1.2.6 scenario: 2 inputs, 1 textbox (sounds kinda dirty). The inputs both trigger a show / hide transition on blur / focus events and focus always comes after blur if click from one input to ...
- 11.6k
1
vote
0
answers
611
views
Update ng-class on HTML tag when routing
I'm writing a Chrome extension using AngularJS. The UI is served via a browser action popup and as the content changes I sometimes need to change the size of the popup. The only way I've been able to ...
- 747
4
votes
4
answers
5k
views
Angular's ng-class: combine enumerated (array) classes and condition-based ones?
I have an array with classes set in the controller (has to be this way, it's read from page's meta-template). I'd also like to have a conditional classes applied to the same element. Is it possible?
...
- 447
98
votes
10
answers
355k
views
adding and removing classes in angularJs using ng-click
I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below ...
- 1,511
1
vote
1
answer
247
views
ng-class is not applied
I am trying to validate a form using AngularJS. This is my form:
<form ng-controller="LoginCtrl" role="form" class="form-horizontal">
<div class="form-group">
<label for="...
- 7,979
1
vote
1
answer
2k
views
Angular ng-class doesn't add dynamic class to element
I'm having trouble grasping that when item.dynamicClass = 'article' why
<div class="type" ng-class="{{ item.dynamicClass }}">
doesn't return a div like:
<div class="type article">
but ...
- 1,063
0
votes
0
answers
119
views
How do I add a class based on a complex angular logical expression
I am trying to set a class to a button based on the value of the expression as follows
ng-class="{disabled:((post_data.somearray.length==0) && (!post_data.message))}
I am trying to check if ...
- 2,912
2
votes
2
answers
1k
views
How to do IF/OR angular ng-class
If I have:
ng-class='{in:$first}'
What is the simplest way to make it add the in class when $first is true or if let's say the item.in ($scope.item.in) value is true ?
note: $first is because I have ...
- 13.5k
0
votes
1
answer
58
views
width within a directive not changing in IE
My directive works perfectly in chrome but not in IE8:
app.directive('barMax', function ($compile) {
return {
restrict: 'E',
scope: {
current: '=',
max: '='...
- 431
5
votes
1
answer
9k
views
ng-class not working inside a directive
I tried creating a directive:
app.directive('barsCurrent', function () {
return {
restrict: 'E',
link: function postLink(scope, element, attrs) {
attrs.$observe('value'...
- 431
0
votes
1
answer
1k
views
How to change the color of the div based on a value
Here are the scripts and style that I used:
<script src="angular.min.js"></script>
<style>
.greater {
color:#D7E3BF;
background-color:#D7E3BF;
}
.less {
...
- 431
7
votes
4
answers
61k
views
Adding class to an element on its click event
I am new to Angular Js. I need to add a class to an element on its click event. I tried the following code. But it is not working.
<html>
<head>
<style>
.active{color:...
- 2,852
3
votes
1
answer
787
views
AngularJS ng-class javascript animations doesn't trigger
I'm trying to attach js-defined animations to the ng-class directive via the usual syntax using add and remove but the animations won't run. Logging reveals that the add and remove functions don't get ...
- 33
2
votes
2
answers
5k
views
Combining angular-ui progressbar with ngClass
I would like to combine the directive progress from angular-ui, with the directive ngClass.
So far I don't get any reactions at all. Am I doing this wrong, or is it not possible to combine?
What I ...
- 43
5
votes
1
answer
2k
views
Class directive not working when using ng-class to load the directive
I am trying to load a 'class' directive using ng-class. but my directive is never loaded when i do that. The directive is a multipurpose directive, and I don't want to create an isolated scope on this....
- 575
1
vote
1
answer
2k
views
AngularJS ng-class not working for conditions
This is very straightforward but I am not able to change the class.
I am basically verifying if the date is in correct format (DD-MMM-YYYY hh:mm:ss).
<input type="text" style="width : 80%" ng-...
- 1,401
0
votes
1
answer
857
views
Injecting class name and toggling class name Angular
I am aware that in angular you can do something like this:
<div ng-class="{myClassName: myCondition}"></div>
and Angular will add 'myClassName' to the class attribute if the condition is ...
- 1,531
628
votes
12
answers
670k
views
Adding multiple class using ng-class
ALERT: This thread is for the old AngularJS!
Can we have multiple expression to add multiple ng-class ?
for eg.
<div ng-class="{class1: expressionData1, class2: expressionData2}"></...
- 10.6k
7
votes
1
answer
3k
views
object property value as class name, ng-class
Tried looking for an answer to this with no success.
Is there anyway to have the value of a property be the class name when using ng-class in angularJS?
An example of what I mean:
var things = [
...
- 73
3
votes
2
answers
10k
views
Can you use variables with NG-CLASS active link with Angular?
I want to use a loop to create my navigation Here is my code I keep getting an error saying it won't evaluate as a string? The code that I wrote is so that it will loop through the $scope.navigation ...
- 835
0
votes
1
answer
273
views
How to set multiply rules with and without expression in ng-class directive?
I'm trying to use directive called ng-class to set multiply rules from CSS file.
Here is a part of code
<div class="filterToggleBtn thumbnail"
ng-class="{ filterToggleBtnSide ...
265
votes
9
answers
571k
views
AngularJS ng-class if-else expression
With AngularJS I'm using ng-class the following way:
<div class="bigIcon" data-ng-click="PickUp()"
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>
I'...
- 17.1k
0
votes
1
answer
695
views
angular: ng-class in ng-repeater , duplicate call
first of all sorry for my English.
my problem is:
i've this simple code:
<li ng:repeat="item in menu.items" ng:class="getMenuItemClass(item)">
<a ng:href="#{{item.url}}">{{item.label}}&...
- 113
0
votes
1
answer
3k
views
is it possible to combine multiple ng-class
is it possible to avoid repeating the code here by replacing the ng-switch by ng-class.
<li ng-repeat="el in elm.required">
<span ng-switch on="el.type" >
<i class="icon-...
- 14.5k
0
votes
1
answer
1k
views
angularjs ng-class in nested directive
Tried so many different ways and still can't figure this. I have a menu with ng-class="{menuVisibleAnimation: menuOpen}" in a template in a nested directive. When I click on the button in the parent ...
- 945
2
votes
1
answer
5k
views
Binding in ng-class in angularjs
In the code below,i am having a variable in controller named "selectedDesignAreaId"
and i bind this variable with the current value of "designarea.id",but when i change "selectedDesignAreaId" to any ...
- 465
26
votes
1
answer
38k
views
ng-class not being applied
I have a textarea containing a message to be posted and a span with the number of characters still available.
<textarea name="" cols="" rows="" maxLength="{{maxMessageLength}}" ng-model="...
- 9,740
41
votes
9
answers
58k
views
How to use ng-class in select with ng-options
I have an array of Person objects
var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
...
- 3,846
2
votes
2
answers
896
views
ng-click as a class in AngularJS
I'm trying to work out why this doesn't work:
<a class="ng-click: loadSomeDatas();">Click here to load some datas</a>
But this does:
<a ng-click="loadSomeDatas()">Click here to ...
- 13.4k
4
votes
2
answers
21k
views
angular ng-class does not react on click
I am trying to use ng-class and bind a class to an expression so, that I can unit test the expression binding. But, it seems that I am missing something.
The button:
<li><a class="" ...
- 19.2k
0
votes
2
answers
1k
views
ng-class messing with the order of classes
I have some very simple Angular code which looks like this...
<div ng-repeat="message in data.messages" ng-class="'conversationCard-' +
message.type"></div>
It works, but the resulting ...
- 28.2k
38
votes
5
answers
53k
views
Complex angular js ng-class
I have the component and have a problem setting the css class to it.
I want it to always have a class of "box", then to have additional classes specified by the directive "class" argument and one ...
- 11.2k