Questions tagged [angularjs-ng-class-odd]

1

votes
1

answer
40

Views

Binding class in a repeater

here's my html Aa and in the controller $scope.model.fonts = [''Raleway', sans-serif', ''Open Sans', sans-serif', ''Oswald', sans-serif', ''Crimson+Text', sans-serif', ''Roboto', sans-serif']; What I'm trying to do is display a link foreach font in the array. Onclick the value should be set on $scop...
Alex
1

votes
2

answer
184

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. {{ticker.ticker}} ^ This works to have the first item have the class of selected by default. {{ticker.ticker}} ^ Thanks to this question. The above works to add the...
Leon Gaban
1

votes
1

answer
890

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 execute a function on the local scope. directive('testDirective',function(){ restrict: 'E', scope: { input...
FoxMulder900
1

votes
1

answer
67

Views

AngularJS bootstrap class

I have the following angularjs ng-repeat ,column status have three values (Phoned,Active,Waiting) {{person.id}} {{person.status}} I need to apply bootstrap class depending on the value of status,like the following image
Ali-Alrabi
1

votes
2

answer
112

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 quite easy but I'm just starting. Here is my index.html: Hello There And here my app.js: var app = angula...
notme
1

votes
1

answer
200

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: and my directive code: app.directive('bInput', function ($compile) { return { restrict: 'EA', replace: true, link: function...
Dester Dezzods
1

votes
3

answer
848

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 over cells, assume the following code: My goal is that when cell.count = 1 the resulting class will be...
tome
1

votes
1

answer
55

Views

Angular dirrectives and ng-class

Suppose a directive with html e.g. in component.html like .... then I'm trying to do... After that in ng-class I'm having something like {'classB': varB} {'classA': varA} that is obviously not working. The problem is that I cannot change component.html but I need to add/remove class on keyup (depen...
Eugeny89
1

votes
1

answer
779

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'm misunderstanding the scope of the ng-repeat, but I'm stumped. My repeat looks something like: {{i...
Chad
6

votes
3

answer
1.3k

Views

Add a class selectively to an ng-repeat AngularJS

I have an ng-repeat for a table, I want to be able to add a class when is clicked, and remove the class when un-clicked. Multiple can be selected at the same time. Right now ALL of the cities are or are not getting the class applies. For example: (lets say nodes has 100 items) {{node.name}} {{no...
user1876246
2

votes
2

answer
309

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; } I want the first button that is clicked to gain the border1 class, 2nd button clicked the border2 class and sam...
Leon Gaban
1

votes
2

answer
8.8k

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. {{article.name}} {{article.type}} {{article.anzahl}} jsfiddle
twyly
5

votes
3

answer
5.1k

Views

ngClassOdd/ngClassEven not working as expected

Using Angular version 1.2.15, I found a bug that it seems started on version 1.2.2 until 1.2.15. Plunker Demo to reproduce Html {{name}}
Dalorzo
6

votes
2

answer
30.4k

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 weak normal strong JavaScript .controller('AppCtrl', function($scope, $stateParams) { $('#weak').click(func...
Lu Kanemon
2

votes
1

answer
492

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 subitems for all the items should be deselected. How to do this inside the controller. I tried by adding...
zilcuanu
3

votes
3

answer
7.6k

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. {{tag.term}} Is there a way to write a check like ng-class='{blue1: tag == 1 || blue2: tag == 2 || blue3: tag == 3 }'
Leon Gaban
3

votes
2

answer
8.9k

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 help thanks a b c a b c
Xiao Xinqi
2

votes
2

answer
349

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 Concert Band Ceremonial Band 191st Jazz Combo Brass Ensemble Celtic Fire the tab number is: {{tab}} Code var ap...
Ming Huang
3

votes
1

answer
201

Views

AngularJS ng-class Expression Not Working Properly?

I am using ng-repeat to list out the number of home runs vs away run in a simple table. I am applying a class based on which team is winning using the following snippet of code: {{ game.home_team_name }} {{ game.linescore.r.home }} The code works if the number of home runs is greater than the numbe...
Eoghan Buckley
2

votes
2

answer
1.2k

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 elements but for some reasons this isn't working on all of them, just on the one who's currently displayed...
Brain Up
2

votes
4

answer
97

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 to gain or lose the selected class on ng-click. How would you combine the code in the markup or contro...
Leon Gaban
2

votes
1

answer
85

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 name of the object in the array is the same as the model used to create the button. Then if so toggle...
Leon Gaban
1

votes
3

answer
68

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 Location name And this the part of controller where i fetch the response }).success(function(data, status, headers, config) { console.log(data, status, heade...
Valor_
3

votes
1

answer
1.4k

Views

how to get ng-class value in directive

I have some repeated 'li' elements, and some of them has 'active' class like this in the othe hand, I have a directive to add some classes depend on 'active' class, My directive is like this directive('activeCollapsible', function() { return { restrict: 'A', link: function($scope, element, attrs) {...
Behzad Shirani
1

votes
3

answer
268

Views

Why ng-class is not applied as per the current state of ui router?

My application has two different views (page1 and page2), which has been configured with ui-router's stateProvider. I want to apply a css on the body based on what page I am looking at. If I am looking at page1 I want to apply class1 to the body of the page and class2 for page2. To achieve this I am...
bruce_wayne
1

votes
3

answer
78

Views

Why ng-class-even required extra quotes

I am working on angularJS where my codes are fine but i am stuck at one place where i cant find why extra quotes are required in ng-class-even directive. In this line why striped is written like this ''striped'' instead of this 'striped' .striped { color:white; background-color:black; } {{x.Name...
Gaurav Aggarwal
1

votes
2

answer
376

Views

Why doesn't ng-class work with a class name?

I wrote the following code: .dotted { border:dotted; } .... {{ answer }} My purpose was that the element will be put inside dotted border line. It doesn't work. I looked at Angular documentation (https://docs.angularjs.org/api/ng/directive/ngClass) and I saw that: If the expression evaluates to...
CrazySynthax
2

votes
1

answer
1.6k

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. {{ticker.ticker}} Now in my controller this is how I'm currently setting the first items selected class: var vs = $scope; vs.tickers = data; vs.tickers[0].selected = true; ^ This worked perfectly until I...
Leon Gaban
3

votes
2

answer
2.5k

Views

addclass if search field has value: Angularjs

I have a search input field and a listbox, {{role}} I need to addclass say .addClear{ background: url(../images/Close.png) no-repeat right -10px center; background-repeat: no-repeat; background-position: right 5px center; } whenever there is text, i should happen on change function. And on cl...
Erma Isabel
3

votes
1

answer
1.5k

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 action: http://plnkr.co/edit/?p=preview Not sure how to toggle those values however within predicate: Rece...
Leon Gaban
2

votes
3

answer
2.4k

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'm trying to apply this conditionally using ng-class which is fine, but how to do it by $index select...
Iasan Mac an Lighiche