The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
1
vote
2answers
51 views
Why doesn't ng-class work with a class name?
I wrote the following code:
<style>
.dotted {
border:dotted;
}
</style>
....
<p ng-style = "mystyle" ng-class="dotted "> {{ answer }} </p>
My purpose ...
0
votes
3answers
34 views
use of operators( >,<,==,!=) in ng-class
I want to use Operators to check if value is greater or equal to other number or variable in ng-class, and then apply a style class accordingly. Basically i want to color the div based on their prob.
...
0
votes
1answer
14 views
angularjs alternate colouring only for the visible objects in the entire set
In my angularjs application, I have the following json.
$scope.itemsList = {
"busName": "ABC",
"needsToHide": true,
"num": 123
}, {
"busName": "xyz",
"...
0
votes
1answer
44 views
ng-class not updating inside of ng-repeat when array is changed
The code below is from a chat interface in an Angular application. The user will select the users they wish to send the message to by clicking on user bubbles which will add those users to an array ...
0
votes
1answer
32 views
How can I move the ng-repeat filter into the controller and apply ‘active’ class when user clicks?
I have a tabbed slider where can switch the view of the slider by selecting the tab, which is filtering the ng-repeat by property.
How can I move the filter into the controller and apply ‘active’ ...
1
vote
1answer
51 views
Angular dirrectives and ng-class
Suppose a directive with html e.g. in component.html like
<div class="text-field"
ng-class="{'classA': varA}">
....
</div>
then I'm trying to do...
<component ng-class="{'...
1
vote
3answers
39 views
Change class with angular if response is false
I'm having some problems how to switch class if request is false. Let me show you my code with explanation.
So this is how my input looks like
<div class="form-group">
<label for="...
0
votes
1answer
40 views
Inject scope in ng-class
my problem is simple:
i'm doing this:
<div class="text-center tag row class_{{infoticket.tags[0]}}">{{infoticket.tags[0]}}</div>
<div ng-repeat="item in ticketcontent track by $index"&...
2
votes
1answer
99 views
applying class using ng-class for nested items in Angularjs
I am displaying the menu items in the below format. The data contains list of items and for each item there is a subitem. I need to apply the selected class for the subitem selected and all other ...
0
votes
0answers
51 views
Angularjs - unable to properly use directive when window scrolls
I've followed this answer here: Bind class toggle to window scroll event as I need to bind class using ngClass when the window scrolls, and according to the above mentioned answer I should be able to ...
0
votes
1answer
61 views
Not able to pull the css class with ng-class directive of AngularJS
I want to create a table with sorting(ascending / descending) feature on click event (clikcking on table headers), using ng-clickof AngularJS.
I have shared the code on Plunker.
The problem is that I ...
0
votes
1answer
75 views
Variable value not passing in a controller using directive with ng-class
I am referencing the value of the variable in a controller in an ng-class template but its not working.
here is the html directive template URl :
<div class="tooltip-anchor">
<div class=" ...
0
votes
1answer
641 views
optimal way to highlight selected li in Angularjs
I am using Angularjs 1.4.7 version. I have a <ul><li>..</li>....</ul> and want to apply a background-color property to the selected li. The code is as below:
<ul ...
0
votes
1answer
918 views
add class when input is valid in angularjs
I have a bug in my angularjs form.
I want to change the class of an element when the input from the angularjs form is valid and change it back if its invalid.
I got this code:
<li data-ng-class="{...
0
votes
2answers
631 views
ng-class if else not working with repeat value
I been trying to change a class if a tab in a repeat, depending in the title of the tab. snippet shown below
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-class="{{tab.title}} === 'Logs'...
2
votes
3answers
1k views
ng-repeat with *conditional* ng-class by $index
I'm applying a button to a list-group-item using ng-repeat where the button has a class btn-primary when not selected and a minus glyphico and a class btn-success when selected and an ok glyphicon. I'...
1
vote
1answer
284 views
ngClass - creating a class name containing angular expression
I would like to create class names based on an the evaluation of an angular expression, but it seems that angular is removing these expressions from the eventually compiled classes. When iterating ...
1
vote
1answer
28 views
Binding class in a repeater
here's my html
<span class="" ng-repeat="font in model.fonts" >
<a ng-click="model.value.HeadingFont = font" href="javascript:void(0);" ng-class="[font-bulb, {active: font==model.value....
0
votes
1answer
68 views
How do I make an ngClass reactive to array membership in Angular?
I'm trying to make a list class reactive to whether that list member's ID is in an array. I could handle that with a function in the controller, but that doesn't automatically update the class if the ...
0
votes
1answer
52 views
Ng-class not evaluating the given argument
I have a problem with the ng-class directive : i want to dynamically add a class when the screen size is large or medium. From what i can tell the condition is not being evaluated when generating the ...
4
votes
1answer
13k views
How to add and remove class with AngularJS?
I have a few buttons that work like switchers. If you click one it becomes active and "shuts down" other buttons. I did this using jQuery but would like to use AngularJS. Here is my code:
HTML
<...
0
votes
1answer
42 views
How to remove class with ng-mouseenter in this case
On the div with the class of ticker, I'd like to remove the pulse CSS animation class once the user ng-mouseenters.
I don't have a directive setup just for the ticker div, but is there a simple way ...
0
votes
1answer
341 views
ng-class expression only evaluates scope property once
I have 2 divs with an ng-class applied to evaluate a $scope property, called {{stepNumber}}.
<div id="step0" class="col-xs-2" ng-class="{{stepNumber}} == 0 ? 'active' : {{stepNumber}} > 1 ? '...
1
vote
3answers
144 views
ng-class not updating outside the html
I have used following code in my project.
Sorry I won't be able to share any plunker or jsfiddle
<div class="container full-height" ng-class="{'navmargin': model.showHeaderBasedError}" data-ui-...
1
vote
2answers
367 views
ng-switch-when and ng-class compatibility
I was wondering if there were no compatibility issues when ng-switch-when and ng-class are using on the same element like in this sample.
I'm trying to dynamically change the class of this four ...
1
vote
1answer
88 views
Angular apply class in directive
I have a angular directive which will produce bootstrap form-group, looks for $scope.errors for value of ng-model of the directive to show errors.. Example below:
My html code:
<input type="text" ...
2
votes
2answers
130 views
How to set the ng-class in order of item clicked?
http://plnkr.co/edit/pUtuZy?p=preview
I have these 3 border classes:
.border1 {
border: 1px solid #66FFFF;
}
.border2 {
border: 1px solid #33CCFF;
}
.border3 {
border: 1px solid #0099FF;
}
...
1
vote
1answer
558 views
how to get ng-class value in directive
I have some repeated 'li' elements, and some of them has 'active' class like this
<li ng-repeat="menuSubItem in menuItem.items" ng-class="{active: vm.currentMenuName == menuSubItem.name}" active-...
1
vote
1answer
450 views
How to style parent li from child div, using Angular syntax?
http://codepen.io/leongaban/pen/KpZxKG?editors=110
I'm trying to add a border style to the li that contains a div with a
certain class. In this case .text-trans-normal.
Is there a conditional that ...
2
votes
2answers
245 views
Angular tab selecting using controller method
I am trying to use AngularJS to display the tab number when certain tab is selected using the controller method. It does not as expected. Greatly appreciate your help on this one.
HTML
<body ...
-1
votes
2answers
55 views
How to combine these 2 ng-class statements?
<ul>
<li ng-repeat="(k, v) in chartTags track by k" class="blue-tag">
<div class="tag"
ng-class="{blue1: k == 0 , blue2: k == 1 , blue3: k == 2 }"
...
1
vote
2answers
66 views
ng-class not properly working inside h1?
I'm starting studying AngularJs and I was wondering why my code is not working? I was wondering why the h1 tag is not getting orange with the ng-class="'orange'".
I know that the answer could be ...
0
votes
2answers
787 views
Add css class to marked elements in Angularjs
I have a ToDo list and I want that all checked elements become striked when I click on the "Strike marked" button.
This is my code index.html
<!DOCTYPE html>
<html>
<head>
<...
1
vote
1answer
50 views
AngularJS bootstrap class
I have the following angularjs ng-repeat ,column status have three values (Phoned,Active,Waiting)
<tr ng-repeat="person in persons">
<td>{{person.id}}</td>
<...
1
vote
1answer
487 views
Bind ng-class to a local scope expression in custom AngularJS directive
I would like my custom directive to be able to pre-process its own classes based on some values bound to its parent scope. However, I can't seem to get the directive to set its own ng-class and ...
0
votes
3answers
1k views
Toggle active class on item with angular.js
How can I toggle active class on element if I have the following code?
<div class="searchandfilter">
<span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': $...
3
votes
2answers
4k views
angularjs show/hide tabs, click same tab hide the content
when i click tab A, A content show
when i click tab B, A content hide B content show
but the effect i want is when i click tab A, A content show, click A tab again content hide.
Any suggest will be ...
2
votes
1answer
964 views
How to set class to first item in ng-repeat that has been sorted with orderBy?
I have a list of items, which comes in unsorted, I use orderBy to sort by name alphanumerically.
<li class="ticker-li"
ng-repeat="ticker in tickers | orderBy:'ticker'"
ng-class="{'selected'...
2
votes
1answer
70 views
How to fix this ng-class toggle comparison?
http://plnkr.co/edit/7v63GXSIDon1QKm1GXCE?p=preview
I have an array which stores the name of each button that is clicked. Once clicked the object is placed into array, I use ng-class to check if the ...
2
votes
3answers
2k views
How to use $index to change class in ng-repeat?
I have a list which is limited to 3 items, the first item needs class blue1, 2nd needs blue2, 3rd blue3.
<ul>
<li ng-repeat="tag in chartTags" class="blue-tag">
<div class="...
2
votes
4answers
73 views
How to use controller variables along with ng-click to toggle class?
http://plnkr.co/edit/nEfBE33AJen3mz9YvjeC?p=preview
I have a list of tag buttons, by default after all the items are loaded, I set the first 3 items to have the selected class.
Now I also need tags ...
1
vote
2answers
90 views
How to combine ng-class checks and ng-click comparisons?
I have an ng-repeat where the first item needs to have the class selected, as well as clicking on each item then changes the selection.
<li ng-repeat="ticker in tickers"
data-ng-class="{'...
3
votes
1answer
995 views
How to use ng-toggle and ng-class to change icon while using ng-click:predicate
I'm using predicate to easily sort items in my data model. Now I've working on adding in an up and down arrow icons to show which state the sort is currently in.
Example of predicate orderBy in ...
1
vote
1answer
514 views
Angular nested ng-repeat class variable
So I have a fairly complex angular table, and I have the repeating portion all good to go, but when I set a variable with ng-class-even and ng-class-odd, the variable doesn't seem to persist. Maybe I'...
1
vote
2answers
3k views
Angularjs markup table row or colums depends on value
Is there any way to add classes on row or column depends on values. If column "anzahl" is null, the row background-color has to be "gray" and the column "anzahl" background-color goes to "red.
&...
2
votes
2answers
1k views
addclass if search field has value: Angularjs
I have a search input field and a listbox,
<input type="text" class="inputSearch" placeholder="Search" ng-model="searchRoleOne"/>
<i class="fa fa-search"></i> ...
