Menu
  • HOME
  • TAGS

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

angularjs,class,ng-class

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

angularjs,ng-class

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

angularjs,tabs,ng-class

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

angularjs,ng-class

Why a function? I believe you can achieve the same thing using this: <tag ng-class="{smalltext: inProgressCounter &gt; 999, defaulttext: inProgressCounter &lt;= 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

javascript,angularjs,ng-class

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

arrays,angularjs,ng-class

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

angularjs,ng-repeat,ng-class

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

angularjs,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

javascript,angularjs,ng-class

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

angularjs,ng-class

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

javascript,angularjs,ng-class

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

angularjs,factory,ng-class

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

javascript,angularjs,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

javascript,angularjs,ng-class

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?

angularjs,checkbox,ng-class

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

angularjs,ng-class

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

css,angularjs,ng-class

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

angularjs,ng-class

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

css,angularjs,ng-class

Try this ng-class="{'margin-watch': (progress <= 0), 'margin-continue-watch': (progress > 0) } ...

using ng-class on keyup function value

angularjs,ng-class

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

angularjs,ng-class

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

angularjs,ng-class

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

    javascript,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...