FAQ Database Discussion Community


ngClass not rendering properly

angularjs,ng-class
I am loading a todos list, every todo has a flag field which if true the ng-class should apply. When loading data into the page ng-class is applied if I use ng-class="{'completed': todo.isCompleted=='true'}", but then it doesn't work when I play with the checkboxes. On the other hand if I...

ng-Class - multiple conditions and classes

javascript,angularjs,ng-class
I have been looking for examples of multiple conditions in ng-class but I can't find using the same terminology. Here is an example of what I want to achieve. ng-class="isSelected ? 'side_menu_link_active' : 'side_menu_link_disabled' , pageSelected =='lectures' ? 'link_active' : 'link_disabled'" Does anyone knows the correct syntax for this? thanks....

Allow user to click a button only when email is valid

javascript,angularjs,angularjs-scope,ng-class
I am using angularjs on a web application. I am trying to perform something quite simple. I have an email input and a button. I only want the button's function to be enabled once a valid email is entered. I've tried: <div> <p class="required">*</p> <input type="email" ng-model="email" placeholder="Enter Email" required>...

AngularJS Reactive Images (ng-class)

angularjs,onclick,ng-class,onhover
I have 3 variations of 1 image. I need to swap the image based on its Event State For Example: 'current' 'onClick' 'onHover'. Want to use standard Windows Events. Can I use Angular's 'ng-class' with IMAGES and add in onClick & onCover as my Javascript test expression? Precisely testing for...

angular ng-class on a conditional expression for a $scope variable in the controller

angularjs,ng-class
I need to apply a class based on the length of a scope variable <div class="col-md-1"> <i class="float-right" ng-class="{'user-online':activeAssignments.length > 0, 'user-offline': activeAssignments.length <= 0}"></i> </div> Could i do something like this or is there a better way of doing this? $scope.activeAssignments is defined in the controller...

AngularJs ng-class using expression

angularjs,ng-class
Recently I have need to apply a class base on the json data from server side. But seems like it doesn't work out for me. Any idea about this? Thanks code: <tr> <td><span class=" text4 green col-md-12 col-lg-12" ng-class="numclass('inProgressCounter')">{{inProgressCounter}}</span></td> <td><span class=" text4 green col-md-12 col-lg-12" ng-class="numclass('inProgressCounter')">-Accounting Review</span></td> </tr> JS: $scope.numclass...

output array of class names on to element ng-repeat

angularjs,ng-repeat,ng-class
I have array of class names that I want to attach to an element for example.. Tags = [tag1, tag2, tag3] ; <article ng-class="tag1, tag2, tag3"></article> is there any way I can use a for loop on the ng-class to output this array onto the element.. Thanks ...

HTML text binding in view(with trustAsHtml) from JSON, having ng-Class does not evaluate properly

angularjs,angularjs-directive,ng-class
I'm having a header with two solid div's one below the other. When we scroll the page, I've included animation in my controller to hide the bottom div. This top DIV has a couple of changes too when we scroll down the page. I'm controlling that with smallHeader.floatItRight and smallHeader.floatItLeft...

ng-click / ng-class combination not working as expected with $index

angularjs,angularjs-ng-click,ng-class
For some reason my ng-click / ng-class combination is not working. On click the class 'hide' has to be added based on the equality of the productDisplay variable. <div ng-repeat="product in project.data track by $index"> <p ng-click="productDisplay = $index"><strong>{{product.name}}</strong></p> <div class="fileList" ng-class="{'hide': productDisplay !== $index}">{{$index}}</div> I can click on the...

ng-class expression: merge condition and class name

javascript,angularjs,expression,directive,ng-class
Supposing I have 3 variables (they can change its value): $scope.A = 'one'; $scope.B = true; $scope.C = false; <div ng-class="A"></div> renders <div class="one"> <div ng-class="{'two': B, 'three': C}"></div> renders <div class="two"> How can I merge a variable and a expression to render <div class="one two">? Do I have to...

Apply class conditionally angular

css,angularjs,ng-class
I am trying to apply class conditionally through ng-class but its not working ng-class="{'margin-watch':progress <= '0','margin-continue-watch':progress > '0' }" ...

Inconsistent results when evaluating an empty array for ng-show and ng-class

javascript,angularjs,ng-class,ng-show
I am using a controller to load an array and then showing and hiding content based on whether the array is loaded or not. However, the value of the array evaluates differently for different instances of ng-show and ng-class. My service (where the array is updated) is: 'use strict'; angular.module('yeahdoneit')...

angular ngClass evaluation

javascript,angularjs,ng-class
I've been learning AngularJs and have built a very basic Angular app. In one part of the app, I've used ngClass at a div element like <div ng-class='{"some class": aFuncTruthyOrFalsy()}'> <!-- aFuncTruthyOrFalsy() is defined in the controller for this view--> Now, there's an input element in the view that is...

AngularJS | Conditional Class using ng-class

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

using ng-class on keyup function value

angularjs,ng-class
I am trying to accomplish a simple valid toggle on the outcome of a keyup function. Basically, an input keyup action triggers a function. It does some stuff, then returns true or false. Upon this, the css class of span near the input should changes. Am I missing something in...

Angularjs give classes based on variable value

angularjs,ng-class
I have the following php expression. $isActive = ($value['is_active'] == 1) ? '<i class="btn fa fa-toggle-on isActive"></i>' : '<i class="btn fa fa-toggle-off isInactive"></i>'; How can i translate that into angularjs if statement? Thanks in advance!...

ng-repeat value as ng-class for last

angularjs,angularjs-ng-repeat,ng-class
<tr ng-repeat="row in rows"> <td ng-class="{row[th]:$last}" ng-repeat="th in ths">{{row[th]}}</td> </tr> for the code above, i'm trying to use the row[th] value as the name of the class in ng-class for the last td element only. I can use an actual class name just fine, but not the referenced value from...

ngClass applying CSS while ignoring condition when page loads

angularjs,ng-class
I am loading a todos list, every todo has a flag field which if true the ng-class should apply. When loading data into the page ng-class is applied regardless and the text shows decorated, while it should only if isCompleted=true. Th problem occurs only at the first load, because after...

ng-class not working on a custom directive with templateURL

javascript,angularjs,angularjs-scope,angular-directive,ng-class
I have a directive that calls a template. Within the template i am using ng-class which adds a class on click. However, on click, this class is not getting added. Directive: app.directive('myDirective', function () { return { restrict: 'E', scope: { data: "=" }, templateUrl: 'home/user.html' } } ); home/user.html...

Toggle class between two buttons in Angular but restrict to prevent same button from changing class

javascript,angularjs,angularjs-ng-click,ng-class
Trying to create some very basic functionality which basically makes two buttons behave like radio buttons. Have two buttons that are used to show/hide different content based on what is shown. So it is working as expected except for it is changing on any click. So if I click the...

ngClass not updating the class

javascript,angularjs,twitter-bootstrap,angularjs-scope,ng-class
I am using angularJS with bootstrap to design a navigation on my application. I have defined a main controller and inside the main controller I call different page views using the ng-view attribute and then these individual views have their own controllers. I am using the ng-class attribute to add...

How to apply ng-class using String syntax and array syntax?

angularjs,angularjs-directive,ng-class
I am a beginner in angularjs and I read in the doc of angularjs that ng-class can be applied as string and array syntax. so I was trying to apply the ng-class for the below code (1) Using String Syntax <p ng-class="style">Using String Syntax</p> <input type="text" ng-model="style" placeholder="Type here"> (2)...

angular ng-class add class to all except current

javascript,angularjs,ng-class
i have a checkbox inside a table when i check one checkbox i want to add disabled class to all other i tried to achieve this using ng-class <td scope="row"> <input type="checkbox" id="{{$index}}" ng-class="{disabled: $index != currentid}" ng-click="showOptions($event,'$index')" /> </td> inside controller $scope.showOptions=function($event,id){ if($event.target.checked){ $scope.btns = true; $scope.details_tab = true;...

AngularJS factory inside ng-class on body tag not working

angularjs,controller,factory,angular-services,ng-class
Was told to create service/factory and use it on global controller. It's my first time hearing global controller. Anyways, I created a factory called Scroll and injected it on our main.controller.js. The function in the factory is isScrollingEnabled which returns true or false. The other function is setScrolling which will...

ng-click change class to selected button

angularjs,angularjs-ng-click,ng-class
i want to change class btn-white to btn-primary for the selected Button $scope.SelectedCombination = function (combinationId) { $scope.selectedCombination =combinationId; }; html <button ng-repeat="combination in combinations" class="btn btn-white" ng-model="" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId)" type="button">{{combination.name}}</button> ...

applying class in ng-repeat if contained in another array

arrays,angularjs,ng-class
I am querying for a collection of IDs from Parse.com and showing them in my $scope as an array. I would like to apply a class to the items in my $scope that match any one of these IDs, placing a border around the object illustrating that it is already...

Angular JS highlight row based on radio button state

javascript,angularjs,angularjs-ng-repeat,ng-class
I have a table with a set of rows, using an ng-repeat: <tr ng-repeat="model in modelList" ng-class="{hilite : model.select}"> each row with a radio button like so: <input type="radio" name="modelGroup" ng-model="model.select"> The radio buttons work, but I am trying to set the class of the row to highlight the background...

How to use ternary operator to change value of ng-model in AngularJS?

javascript,angularjs,ternary-operator,ng-class
I have one text field and one checkbox. If checkbox is true I want value from address field to become after the checkbox, if false the field should be empty. I tried ternary operator with ng-class and many more, but no luck. What would be the best and working solution...

Bootstrap vs ng-class

javascript,css,angularjs,twitter-bootstrap,ng-class
I use bootstrap to create a table, but if there is some value in a row I change background with ng-class`s help but the priority of bootstrap doesn't give me to do it, what shall I do? Sorry if my English is not so well) <tr ng-repeat-start="objs in Objects" ng-click="param=!param"...