ng-class

I'm wanting to apply a conditional class to an element on the page. Currently it's working with the following code: ng-class="{ 'vfnz-form--error' : loginForm.username.$invalid } This applies a invalid class if the input field is invalid. I'm wanting to apply a " valid" class when the user input field is valid. Is this possible to achieve in the same line of code? Here is a fiddle example: JSFIDDLE 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.

This question already has an answer here: Angular: conditional class with *ngClass 15 answers I'm trying to conditionally assign a class to a div based on the value I obtained from my back-end system. Say there is an object 'A' which has a variable status which possibly has values status1 and status2 . I'm trying to assign 2 classes ( class1 and class2 ) conditionally depending on the status using Angular 2. Following is the condition I'm using. Please suggest a working alternative for this, <div ng-class="{status1 : 'class1', status2 : 'class2'}[A.status]"> ... </div> eltonkamami You can bind

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 conditional class "mini". Conceptually what I want to achieve is something like this: <div class="box {{class}}" data-ng-class="{mini: !isMaximized}"> ... </div> The problem is that when I set the class html attribute, the ng-class attribute is omitted. How to make my example work without changing the controller? Is it even possible, or should I set the class in the controller instead (which I wish to

In Angular 1.x this following code works as I want to to click and flip a card inside an ng-repeat <div class="card" ng-repeat="let card of cards"> <div class="flipcard" ng-class="{'flipped':isflipped}" ng-click="isflipped = !isflipped"> </div> </div> However in Angular 2 when clicked, it flipped every "card" inside the ngFor loop... how do I bind the ngClass condition to the element itself only? <div class="card" *ngFor="let card of cards"> <div class="flipcard" [ngClass]="{'flipped': isflipped }" (click)="isflipped = !isflipped;"> </div> </div> Change it to: <div class="card" *ngFor="let

I have an ng-repeat for a table, I want to be able to add a class when <td> is clicked, and remove the class when un-clicked. Multiple <td> 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) <tr ng-repeat node in nodes> <td>{{node.name}}</td> <td>{{node.date}}</td> <td ng-click="toggleMe( node.city )" ng-class"{clicked : isClicked()}" >{{node.city}}</td> </tr> in my JS $scope.cityArr = []; $scope.toggleMe = function(city) { if ($scope.count > 0) { angular.forEach($scope.cityArr, function(value) {

I have a simple ng-repeat that displays a list of scores and a value of either Positive or Negative. What i am trying to do is when the value is Negative, display a red background CSS class, and when Positive, display a green CSS class. However, for some reason, i am always seeing the red CSS class on my page. HTML: <tr ng-repeat="scores in Test" ng-class="{true: 'warning', false: 'ok'}[scores.Indicator == 'Negative']"> <td>Overall: {{ scores.Indicator }}</td> </tr> CSS: .warning { background: red; } .ok { background: green; } I haven't seen that particular syntax used before, what's the

<ul> <li data-ng-repeat="image in images" data-ng-click="toggle = !toggle" data-ng-init="toggle=false"> <img data-ng-class="{'active' : toggle}" src="" /> </li> </ul> CSS for 'active' class is from bootstrap. So toggling works, which is almost where I want it; I would like it similar to active states in navigation links, except in my example it's dealing with images so need to worry about url strings, etc. I tried emulating this example found here to no avail (I tried the same logic for images): ng-class to highlight active menu item based on ng-repeat. AngularJS If someone could point me in

Hi I have unordered list and all of them have active class. I want to toggle active class when clicked to any list item. My code is like this <ul class="sub_modules"> <li *ngFor="let subModule of subModules" class="active"> <a>{{ subModule.name }}</a> </li> </ul> can anyone help me to do this? Eduardo Vargas You can do something like: <ul class="sub_modules"> <li (click)="activateClass(subModule)" *ngFor="let subModule of subModules" [ngClass]="{'active': subModule.active}"> <a>{{ subModule.name }}</a> </li> </ul> On The component activateClass(subModule){ subModule.active = !subModule.active;

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 is a snippet of my code. Can someone guide me in the right direction <div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div> Controller var app = angular.module("MyApp", []); app.controller("subNavController", function ($scope){ $scope.toggle = function (){ $scope.isVisible = ! $scope.isVisible; }; $scope.isVisible = false; }); geonunez You just need to bind a