ng-click / ng-class combination not working as expected with $index
angularjs,angularjs-ng-click,ng-class
Try toggling instead of going for $index, use productDisplay = !productDisplay this will change the ng-class expression and apply hide class whenever it gets clicked, or more better code you can use ng-if/ng-show/ng-hide instead of using ng-class. HTML <div ng-repeat="product in project.data track by $index"> <p ng-click="productDisplay = !productDisplay"><strong>{{product.name}}</strong></p> <div...
ng-click change class to selected button
angularjs,angularjs-ng-click,ng-class
use ng-class.don't use any javascript function to set css. <button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);clicked=true;" ng-class="{btn-primary:clicked}" type="button">{{combination.name}} </button> or you can use best approach: <button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}"...
AngularJS Reactive Images (ng-class)
angularjs,onclick,ng-class,onhover
There's a short but worthy blog post about this issue here. It suggests using a strategy similar to the following for mouseover/hover events... <div id="divID" ng-init="imgsrc='/images/twitter_blue.png'" ng-mouseover="imgsrc='/images/twitter_brown.png'" ng-mouseout="imgsrc='/images/twitter_blue.png'"> <img ng-src="{{imgsrc}}"/> <div>Image description</div> </div> Additionally, you could use ng-click to manage changes in ng-src for click events <div id="divID" ng-click="updateImageSrc()" ......
How to remove class using ng-class ng-click?
javascript,angularjs,angularjs-ng-click,ng-class
You need to remove the class from the first li and instead set the toggleObject to 1 in the controller. function HolaCtrl($scope){ $scope.toggleObject = 1; } <li data-ng-class="{'active' : toggleObject == 1}" data-ng-click="toggleObject = 1">a click 1<br> </li> <li data-ng-class="{'active' : toggleObject == 2}" data-ng-click="toggleObject = 2">a click 2 <br>...
How to apply ng-class using String syntax and array syntax?
angularjs,angularjs-directive,ng-class
you have added the ng-model="style" in input. So what ever you type in the input that will become the class for the 'p' tag because ng-class="style". check this fiddle http://jsfiddle.net/devjit/wdtk370z/4/ And Type 'style', 'style1', 'style2' in the input field. you will understand what is happening. <div ng-app> <p ng-class="style">Using String...
Trying to set ng-class according to function result
The problem was that I forgot to set this to ctrl inside the controller.
Allow user to click a button only when email is valid
javascript,angularjs,angularjs-scope,ng-class
Here you are: ng-class="myForm.input.$valid ? 'valid' : 'invalid'" ng-class checks whether the input is valid or invalid and returns two corresponding classes for .valid and .invalid. While then you can apply styles with CSS: .valid { background: green; } .invalid { background: blue; } The HTML should be something like...
Add classes to adjacent elements dynamically on mouseenter
css,angularjs,ng-repeat,ng-class
Here's a directive that calculates all of the indices of adjacent cells and adds the adjacent class using jQuery only ... not ng-class. Assumes that rows will wrap , would need adjusting for individual row elements .directive('activityThumb', function() { return { restrict: 'C', link: function(scope, elem) { elem.bind('mouseenter', function(e) {...
Inconsistent results when evaluating an empty array for ng-show and ng-class
javascript,angularjs,ng-class,ng-show
In first case ng-class evaluate you expression as true because in JavaScript Array is an instance of Object. It checks if your Adate.Adates exists and returns true Just try: if ( Adate.Adates ) { // this code will execute when your Adates has an empty array } You can fix...
HTML text binding in view(with trustAsHtml) from JSON, having ng-Class does not evaluate properly
angularjs,angularjs-directive,ng-class
ng-bind-html will not work because you got directives and interpolation in your html. Angulars ngBindHtml directive is used for plain html only. In your ssHeader directive you need to compile the header string. Something like so will do the trick. angular.module('MyApp', []) .controller('MyController', ['$scope', function($scope) { $scope.showHeader = true; $scope.smallHeader...
angular ng-class on a conditional expression for a $scope variable in the controller
I would at least take that logic out of the HTML and use a simple function on the controller: <div class="col-md-1" ng-controller="MyCtrl"> <i class="float-right" ng-class="onlineClass(activeAssignments)"></i> </div> and on the controller $scope.onlineClass = function(a) { return (a > 0) ? 'user-online' : 'user-offline'; }; ...
ng-class will not trigger on custom directive
javascript,angularjs,angularjs-directive,ng-class
First of all active is in an isolate scope, so ng-class has no access to it. Secondly, and more importantly, ng-class is added after the directives of the element have been collected by angular. It's too late. There's no reason to use ng-class if you have your own directive. slideMenu.directive('asmSlideLeft',...
AngularJs styling a single clicked element within an ng-repeat
javascript,angularjs,angularjs-ng-repeat,ng-class
You're not removing the glyphicon-chevron-down class when you click on the element. You end up with an element that has both classes ; whatever CSS rule comes last will be applied. Try this : <i class="pull-right glyphicon " ng-class="{'glyphicon-chevron-up': $index == state.selected, 'glyphicon-chevron-down': $index != state.selected }"></i> Here is a...
ng-class not working on a custom directive with templateURL
javascript,angularjs,angularjs-scope,angular-directive,ng-class
So, the only way i have been able to achieve the expected outcome is through: app.controller('MyController', function($scope) { $scope.checkUsr = function() { var myEl = angular.element( document.querySelector( '#username' ) ); var angElement = angular.element(myEl); angElement.addClass('neccessary'); } }); This feels like a really old way of adding a class, and really...
How to handle selected/unselected ng-class to manage a tabbed popover
When you want to modify a variable of your parent scope from within a ng-repeat you need to use $parent.currentTab. Updated Fiddle...
AngularJs ng-class using expression
Why a function? I believe you can achieve the same thing using this: <tag ng-class="{smalltext: inProgressCounter > 999, defaulttext: inProgressCounter <= 999}"></tag> If you want to use a function, you don't need ng-class: <tag class="foo bar {{numclass(inProgressCounter)}}"></tag> ...
how to get ng-class value in directive
javascript,angularjs,angularjs-directive,ng-class,angularjs-ng-class
You could get the element has active class or not using $watch functino on scope, the function return in $watch first part will get evaluated everytime when digest cycle run & then you will get either true or false value on the basis of element.hasClasss('active') Directive directive('activeCollapsible', function() { return...
ng-class on selected element Angularjs
angularjs,angularjs-directive,ng-class
I was doing some syntax error. We can simply resolve this <ul> <li ng-click="expression= 'created_at'" ng-class= "latest_icon : expression == 'created_at'">Latest </li> <li ng-click="expression= 'popularity'" ng-class= "popular_icon : expression == 'popularity'">Latest </li> </ul> Here latest_icon and popular_icon are classes name which activate according to selected list. ...
ng-Class - multiple conditions and classes
If you want multiple conditions the syntax is: ng-class=" {className: valueToCheckForTruthiness, otherClassName: otherValue } " Example using your class names: ng-class="{side_menu_link_active: isSelected, side_menu_link_disabled: !isSelected, link_active: pageSelected == 'lectures', link_disabled: pageSelected != 'lectures' }" You can take this further and generate an object using a function: $scope.classGenerator = function(isSelected, pageSelected){ var...
Add a class selectively to an ng-repeat AngularJS
javascript,css,angularjs,ng-class
Right now there is a single clicked property on the scope that you're changing and everything refers to that. Try to put clicked on the node instead... $scope.toggleMe = function(node) { if ($scope.count > 0) { angular.forEach($scope.cityArr, function(value) { if (node.city === value) { node.clicked = false; } else {...
applying class in ng-repeat if contained in another array
Please see here http://jsfiddle.net/e9pr4yqj/ Yours ParseSavedExercises contains string and id is number so no id existed in ParseSavedExercises $scope.ParseSavedExercises = ['2','3']; change to $scope.ParseSavedExercises = [2,3]; or use ng-class="{'approved': ParseSavedExercises.indexOf(exercise.id.toString()) == -1}" like here http://jsfiddle.net/1ujgvL80/...
output array of class names on to element ng-repeat
ng-class can take array itself so provided Tags is a property of the scope you could do:- <article ng-class="Tags"></article> ng-class Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the...
AngularJS | Conditional Class using ng-class
You could just do it in many ways, one simple way would be to use an object with bracket notation. Example:- ng-class="{ true: 'vfnz-form--error', false : 'vfnz-form--good' }[loginForm.username.$invalid]" Or (since it cannot be both invalid and valid):- ng-class="{'vfnz-form--error' : loginForm.username.$invalid, 'vfnz-form--good' : loginForm.username.$valid}" And if you want to do it...
angular ng-class add class to all except current
but using this when the page loads all checkboxes have disabled class. This is due to the fact that on page load, all $index values are different than currentid, which you only set after a click. You need to make sure you have a checked checkbox: $scope.showOptions = function...
Bootstrap vs ng-class
javascript,css,angularjs,twitter-bootstrap,ng-class
You can change the rule to a more specific one using specificity rules .table-striped > tbody > tr.red td, .red { background-color: #ff0000; } Demo: Fiddle...
How to use ternary operator to change value of ng-model in AngularJS?
javascript,angularjs,ternary-operator,ng-class
you should use two input elements in this case. Like <input ng-if="isReturnAddress" type="text" class="form-control" ng-model="address"> <input ng-if="!isReturnAddress" type="text" class="form-control"> and in your controller, please check if($scope.isReturnAddress){ var address = $scope.address; } See working fiddle here...
Angularjs give classes based on variable value
I believe you're asking for ng-class. you need to set a variable to represent 'is_active', and use it in your html like so: <i class="btn fa" ng-class="{'fa-toggle-on isActive' : is_active, 'fa-toggle-off isInactive' : !is_active}"></i> ...
Angular JS highlight row based on radio button state
javascript,angularjs,angularjs-ng-repeat,ng-class
give your input a value and change the model value to point to the same model since it's a radio button and data needs to be exclusive <input type="radio" name="modelGroup" ng-model="selected.value" value="{{$index}}"> change your ng-class to ng-class="{hilite : selected.value == $index}" Also make sure you create the variable in your...
AngularJS: Change cell class in a dynamically generated table based on cell value
Using ng-class should work. <td ng-repeat="col in row track by $index" ng-class='getUnitCountCellColor(col)'>{{col}}</td> Here's a demo where I color all the zeros red. Update So you table is in a directive, and the cell-color method is in the controller. You can pass the getUnitCountCellColor function into the directive. <count-table table-type='tableType' get-unit-count-cell-color='getUnitCountCellColor(col)'>...
ng-class not working when called
javascript,html,css,angularjs,ng-class
Remove the double curly braces {{}}. ng-class expects an expression. <li><a ng-class="m['CAD_Usuario'].style"> ...
Toggle class between two buttons in Angular but restrict to prevent same button from changing class
javascript,angularjs,angularjs-ng-click,ng-class
Add a condition to ng-click expression: <button class="someClass" ng-class="{true: 'green', false: 'blue'}[!yupNope.isSelected]" ng-click="yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">YES</button> <button class="someClass" ng-class="{false: 'green', true: 'yupNope'}[!yupNope.isSelected]" ng-click="!yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">NO</button> Your modified plunkr....
AngularJs condition class And regular class
angularjs,conditional,ng-class
You could probably do like this : ng-class="[(task.completed && 'card--done') , task.color]" if task.completed is falsy it will add class name "false" to the element but it should be harmless. Problem is when you provide an array it will use the string representation of every item in the array, so...
Broke ng-class by using a factory
Since the changes to nav are made outside of the Angular context (from the event listener callback for window's scroll event), you need to manually call scope.$apply() at the end of the callback. .bind('scroll', function (evt) { ... scope.$apply(); }); See, also, this short demo....
ngClass not updating the class
javascript,angularjs,twitter-bootstrap,angularjs-scope,ng-class
The syntax is wrong on the template. It should be: <li role="presentation" ng-class="{'active': path==='/'}"><a ng-href="#/">Home</a></li> And as style guide try using the === instead of the simple == because of type coercion. Or test agains truthy or falsy...
Angularjs Scope method not being called by ng-class
Pass the getCellColor method to the directive like this: <count-table table-type='tableType' get-cell-color='getCellColor(col)'> </count-table> The directive looks like this: app.directive('countTable', function(){ return { restrict: 'E', scope: { tableType:'=tableType', getCellColor: '&' }, templateUrl: 'table.html' }; }); The directive template looks like this: <table> <tr ng-repeat="row in tableType.data.rows"> <td ng-repeat="col in row track...
angular ngClass evaluation
Angular binding is using $watch to monitor changes in the function value. The digest cycle is calling your function to compare the result with last value. This article is nice explaining this http://tutorials.jenkov.com/angularjs/watch-digest-apply.html#watch I suggest binding to scope variables instead of functions. i.e. have a variable in the scope that...
Using a button instead of checkbox for ng-model?
you can toggle the value of MYWIDTH by doing this <button ng-click="MYWIDTH = !MYWIDTH">Wide</button> ...
ng-class and matching value inside array angularjs
angularjs,angularjs-scope,ng-class
You can try: ng-class="{ 'active' : question.chosen.indexOf(key) >= 0 }" ...
Angularjs ng-class not updating when using object annotation style
In short, { {{user.genre}}: true} is not a correct angularjs expression For your solution, try ng-class="getClass(user.genre)" and do whatever you want in getClass function example...
AngularJS: Apply a css class when a filter return no result
Save the filtered result: <div ng-repeat="item in filteredItems = ( todo.items | filter:categoryFilterFn)"> Move selectedCategory to $scope: $scope.selectedCategory = null; $scope.selectCategory = function(newCategory) { $scope.selectedCategory = newCategory; } Use ng-class on the buttons: ng-class="{ 'no-result': selectedCategory === letter && !filteredItems.length }" Demo: http://plnkr.co/edit/Gl1i4dLyCCwuorQHB5SS?p=preview...
ng-repeat value as ng-class for last
angularjs,angularjs-ng-repeat,ng-class
After much troubleshooting, I came up with the following solution (extending @tasseKATT's original answer: <td ng-class="{true: [row[th], 'staticCSSClassName']}[$last]" ng-repeat="th in ths">{{row[th]}}</td> The code above adds two classes to the last <td> in ng-repeat: value contained in row[th] staticCSSClassName So, basically, the value part in the Object can be an array...
ngClass not rendering properly
So, it looks like your server is returning the boolean values as strings, that's why your bindings don't work... You can either change your server's return values (preferred) or add ng-true-value and ng-false-value to your check box and keep the binding on ng-class using the string comparison: <ul id="todo-list"> <li...
adding removing an ng-class on a ng-click function
angularjs,angularjs-ng-click,ng-class
The way you have implemented it (which doesn't make much sense btw), you need to register a listener for the click event on the window object (and because we are in Angular we should use the $window service). Every time the window object receives the click event it should reset...
ng-class expression: merge condition and class name
javascript,angularjs,expression,directive,ng-class
I've got two solutions in my mind : See them working in this plunker First : in HTML <div class="aclass {{A}}" ng-class="{'two': B, 'three': C}"></div> Second : With a function <div class="aclass" ng-class="getClasses()"></div> And in your controller $scope.A = 'one'; $scope.B = true; $scope.C = false; $scope.getClasses = function(){ var...
Apply class conditionally angular
Try this ng-class="{'margin-watch': (progress <= 0), 'margin-continue-watch': (progress > 0) } ...
using ng-class on keyup function value
For one, you don't need to "override" the class you can have only one. Anyhow, the problem is that you are returning a value from a Promise, and it's meaningless. Also, you have to associate the status of the request with the loop iterator so first change the markup to...
AngularJS data-binding
You should'nt use an expression inside a ng-attribute like that. And it will fail (without or without the state object) : Error: [$parse:syntax] Syntax Error: Token '?' not a primary expression at column 2 of the expression [ ? 'on' : 'off'] starting at [? 'on' : 'off']. That's normal...
ngClass applying CSS while ignoring condition when page loads
You forgot ' ' ng-class="{'completed': todo.isCompleted==true}" ...
AngularJS factory inside ng-class on body tag not working
angularjs,controller,factory,angular-services,ng-class
The $scope of the controller you're attaching the value to doesn't extend to the <body> element. Instead, you can whip together a directive: .directive('shouldScroll', function (Scroll) { return { restrict: 'A', link: function ($scope, elem) { $scope.$watch(Scroll.isScrollingEnabled, function (n) { if (n) { elem.addClass('scrolling'); } else if (n === false)...
How active a class in angular when do click in element
css,angularjs,angularjs-ng-click,ng-class
Use ng-class and set the condition: <li ng-class="{'active' : catalog.selected == ''}" ng-click="catalog.selected = ''">ALL</li> <li ng-class="{'active' : catalog.selected == 'uno'}" ng-click="catalog.selected = 'uno'">UC</li> <li ng-class="{'active' : catalog.selected == 'dos'}" ng-click="catalog.selected = 'dos'">CEM</li> <li ng-class="{'active' : catalog.selected == 'cuatro'}" ng-click="catalog.selected = 'cuatro'">SMB</li> <li ng-class="{'active' : catalog.selected == 'cinco'}"...
Angularjs ng-class
You have some other issue. The following, with multiple conditions, works: <input ng-model="highlightEven" type="checkbox"> <div ng-repeat="item in ['a', 'b', 'c', 'd']" ng-class="{even: $index % 2 === 0 && highlightEven}">{{item}}</div> plunker...
angularjs,angularjs-ng-repeat,ng-class
After much troubleshooting, I came up with the following solution (extending @tasseKATT's original answer: <td ng-class="{true: [row[th], 'staticCSSClassName']}[$last]" ng-repeat="th in ths">{{row[th]}}</td> The code above adds two classes to the last <td> in ng-repeat: value contained in row[th] staticCSSClassName So, basically, the value part in the Object can be an array...
ngClass not rendering properly
So, it looks like your server is returning the boolean values as strings, that's why your bindings don't work... You can either change your server's return values (preferred) or add ng-true-value and ng-false-value to your check box and keep the binding on ng-class using the string comparison: <ul id="todo-list"> <li...
adding removing an ng-class on a ng-click function
angularjs,angularjs-ng-click,ng-class
The way you have implemented it (which doesn't make much sense btw), you need to register a listener for the click event on the window object (and because we are in Angular we should use the $window service). Every time the window object receives the click event it should reset...
ng-class expression: merge condition and class name
javascript,angularjs,expression,directive,ng-class
I've got two solutions in my mind : See them working in this plunker First : in HTML <div class="aclass {{A}}" ng-class="{'two': B, 'three': C}"></div> Second : With a function <div class="aclass" ng-class="getClasses()"></div> And in your controller $scope.A = 'one'; $scope.B = true; $scope.C = false; $scope.getClasses = function(){ var...
Apply class conditionally angular
Try this ng-class="{'margin-watch': (progress <= 0), 'margin-continue-watch': (progress > 0) } ...
using ng-class on keyup function value
For one, you don't need to "override" the class you can have only one. Anyhow, the problem is that you are returning a value from a Promise, and it's meaningless. Also, you have to associate the status of the request with the loop iterator so first change the markup to...
AngularJS data-binding
You should'nt use an expression inside a ng-attribute like that. And it will fail (without or without the state object) : Error: [$parse:syntax] Syntax Error: Token '?' not a primary expression at column 2 of the expression [ ? 'on' : 'off'] starting at [? 'on' : 'off']. That's normal...
ngClass applying CSS while ignoring condition when page loads
You forgot ' ' ng-class="{'completed': todo.isCompleted==true}" ...
AngularJS factory inside ng-class on body tag not working
angularjs,controller,factory,angular-services,ng-class
The $scope of the controller you're attaching the value to doesn't extend to the <body> element. Instead, you can whip together a directive: .directive('shouldScroll', function (Scroll) { return { restrict: 'A', link: function ($scope, elem) { $scope.$watch(Scroll.isScrollingEnabled, function (n) { if (n) { elem.addClass('scrolling'); } else if (n === false)...
How active a class in angular when do click in element
css,angularjs,angularjs-ng-click,ng-class
Use ng-class and set the condition: <li ng-class="{'active' : catalog.selected == ''}" ng-click="catalog.selected = ''">ALL</li> <li ng-class="{'active' : catalog.selected == 'uno'}" ng-click="catalog.selected = 'uno'">UC</li> <li ng-class="{'active' : catalog.selected == 'dos'}" ng-click="catalog.selected = 'dos'">CEM</li> <li ng-class="{'active' : catalog.selected == 'cuatro'}" ng-click="catalog.selected = 'cuatro'">SMB</li> <li ng-class="{'active' : catalog.selected == 'cinco'}"...
Angularjs ng-class
You have some other issue. The following, with multiple conditions, works: <input ng-model="highlightEven" type="checkbox"> <div ng-repeat="item in ['a', 'b', 'c', 'd']" ng-class="{even: $index % 2 === 0 && highlightEven}">{{item}}</div> plunker...