Issue Hi, i’m trying to add a class to an element via ng-class. As you can see, the code is very simple but it doesn’t add the class: app.run(function($rootScope, $location,$http,ngDialog,array_helper){ var update = function() { /*CONFIG PARAMS*/ $rootScope.config = {};
Continue readingTag: ng-class
AngularJS ngClass not working in ngRepeat in custom directive inside ngRepeat
Issue Here’s a plunker: http://plnkr.co/edit/hJsZFCBZhFT5rRo1lgSZ?p=preview It’s a simple directive that is supposed to show a given number of dots and highlight a subset of them based on the value, min, and max given, similar to a star rating. It works
Continue readingAngularJS: Find specific item in list of items / if statement in ng-class
Issue I want to highlight the current user in a list of all users. My code looks like this. <div class=’user’ ng-repeat=’user in users’> <span class=’name’>{{ user.displayName }}</span> </div> I have currentUser.id that I want to compare to user.id as
Continue readingSyntax of ng-class
Issue I am assigning ng-class to an element using this. ng-class=”{‘level-‘ + {{row.level}}:true,active:TestFlag==true}” but it is giving me tons of errors. What is wrong with its syntax? What is the correct way of doing this? Solution use ng-class=”{‘level-{{row.level}}’: true, active:
Continue readingAngular trying to understand method for checking if element isActive
Issue I’m following thinksters angular nfl fantasy tutorial here http://www.thinkster.io/angularjs/eHPCs7s87O/angularjs-tutorial-learn-to-rapidly-build-real-time-web-apps-with-firebase and they implement the ng-class active in this way… <li data-ng-repeat=”entry in navbarEntries” data-ng-show=”auth” data-ng-class=”{ active: entry.isActive }”> $scope.$on(‘$routeChangeSuccess’, function() { $scope.navbarEntries.forEach( function(data) { data.isActive = ($location.path().indexOf(data.link) == 0); }
Continue readingHow to assign class to an element using $scope variable in angular js
Issue I have a class .haba-haba{ border:1px solid red; height:50%; width:50%; } I am storing the class name in scope variable in my controller using $scope.className = “haba-haba”; How can I assign $scope.className to my div as a class? I
Continue readingAdd class to element with ng-class when checkbox inside it is checked
Issue I have a selection of divs with a checkbox each. I’m trying to add a class to the label when each particular checkbox is checked. I saw I could do it creating a specific model for each box (ng-model:”isChecked-1″
Continue readingApplying multiple CSS class names of different natures using ng-class in AngularJS
Issue I have a directive whose structure is: <mydir ng-class=”i.labels”, ng-class=”{‘elSelected’: i.id == selectedId}”></mydir> Here i.labels is a an array of CSS class names and i.id and selectedId are numbers, all of which are declared inside the controller. I want
Continue readingng-class in ng-repeat: conditional class names depending on the item parameters
Issue In a ng-repeat, I’d like to set the class names of a ng-class depending on some item parameters. Simple example where I wanted to add the gender and the age corresponding class to each <li>: <div ng-init=”friends = [
Continue readingAngularJS – Change multiple CSS classes on 1 <div> from multiple options
Issue I’m afraid I’m new to Angular and therefore my knowledge is limited. I’m hoping there is an easy solution to this and I’d very grateful for any help. Problem: I have multiple dropdown lists all populated with data from
Continue readingAngularJS 1st ng-class works 2nd doesn't
Issue I have the following: <div data-ng-controller=”resultsController”> <div id=”DIV1″ ng-include src=”‘views/sidebar.html'” ng-class=”showSidebar ? ‘open’ : ‘closed’ “></div> <div id=”DIV2” ng-class=”showSidebar ? ‘open’ : ‘closed’ “></div> And within ( ng-include src=”‘views/sidebar.html’” )^ i have the following div with ng-click which triggers
Continue readingHow to do IF/OR angular ng-class
Issue If I have: ng-class='{in:$first}’ What is the simplest way to make it add the in class when $first is true or if let’s say the item.in ($scope.item.in) value is true ? note: $first is because I have a ng-repeat
Continue readingng-click on checkbox returns array
Issue I have a problem with my AngularJS Application, I try to call a function in my Controller but the parameter when I console.log(id); , id is an array… I Use [ ] instead of {{ }} because i’m working
Continue readingAngular ng-class not rendering correctly HTML
Issue I’m new to AngularJS and i have the next issue. I’m calculating my CSS class of the body tag with ng-class like this. <body ng-class=”getCSSclassBody(Sucursal.SucursalEmpresaRubroNombre)”> The thing is that sometimes is rendering the HTML correctly, but sometimes class is
Continue readingng-class not taking both classes
Issue i have an ng-class like this ng-class=”{‘alert alert-success’: response.submitSuccess , ‘alert alert-danger’: !response.submitSuccess }” the problem is , suppose “response.submitSuccess” returns true , only alert-success class is added and not the alert class. Solution Doesn’t it make more sense
Continue readingNg-class – remove a class after it is added to the DOM
Issue I am using animate.css to make animation on the same element. I am having a problem in removing the class after adding it. HTML <form ng-submit=”animate()” ng-controller=”AnimateCtrl”> <input type=’text’ ng-model=”some”> </form> <div ng-class=”{shake:animation.shake}” class=”animated”> Angular myapp.controller(function($scope){ var animation =
Continue readingAngularJS add two classes and one with conditional
Issue I want to set an span 2 classes and one more with conditionality if item.qty is 0. I have this <span ng-class=”glyphicon,glyphicon-minus,{‘notvisible’: item.qty 0}”/> But this dont work..i think this is not the sintax but i havent found anythink.
Continue readingng-class doesn't do what a simple css class does
Issue I was expecting ng-class to at least do what a simple class does i.e. apply a css property. In the plunker example, if the replace ng-class with class, it works and I get the indent. i.e. ng-class=”indentLeft” doesn’t work
Continue readingHow to use ng-class binding one more class to one value
Issue I want to bind one more class to a value, like this: ng-class=”{first: isTrue, second: isTrue, third: isTrue}” Is ng-class Exists any usage can bind them in once, like this? (below code is not working) ng-class=”{[first, second, third]: isTrue}”
Continue readingAngularJS ng-class not working with :hover pseudoclass
Issue Hover psuedoclass doesn’t seem to work with ng-class … any ideas? Here’s a sample: http://jsfiddle.net/75n6w/11/ <style> .orange {color:orange} .pointer-hover:hover { cursor: hand; cursor: pointer; } </style> <table ng-app> <thead> <th></th> <th>Orange<br />class</th> <th>Rollover<br />psuedoclass</th> </thead> <tr> <td>With class tag</td>
Continue readingng-class will not trigger on custom directive
Issue I am currently developing a slide menu directive for AngularJS. The javascript consists of three types of directives: the directives for each type of sliding menu (for brevity’s sake I only included the left sliding menu), one wrapper directive
Continue readingng-class on selected element Angularjs
Issue I have a situation where i am sorting data on the basis of expression: html : <ul> <li ng-click=”expression = ‘created_at'” ng-class=”latest_icon: ‘selected'” >latest post</li> <li ng-click=”expression = ‘popularity'” ng-class=”popular_post: ‘selected'” >popular post</li> </ul> <div ng-repeat = “data in
Continue readingadding removing an ng-class on a ng-click function
Issue I have created a an ng-clickfunction which is doing the basics i need, add an active state class click here. I seem to be have an issue, removing the active class when i want to click out of the
Continue readingHow to handle selected/unselected ng-class to manage a tabbed popover
Issue My code is as follows (the fiddle): <div ng-controller=”myCtrl”> <div ng-model=”currentTab” ng-init=”currentTab=’Tab1′”/> <div ng-init=”popovers = [ { name: ‘Popover1’, displayName: ‘Pop over with two tabs’, tabs: [ { name: ‘Tab1’, displayName: ‘First tab’, description: [‘First tab description’] }, {
Continue readingng-class if object exists angularjs
Issue How can we activate class if object exists. i have a json array where i need to activate a class if image_id exists for that particular array. something like ng-if=”data.image_id” then class get activated <div class=”test” ng-class=”classonimage:data.image_id”> //showing data
Continue readingApplying ng-class based on value
Issue 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
Continue readingAngularJS: Apply a css class when a filter return no result
Issue I’ve created a kind of glossary with AngularJS When i click on an alphabet list buttons, a function (categoryFilterFn), filter the json data by categories. I would like to apply a CSS to the button, when no results is
Continue readingBroke ng-class by using a factory
Issue I had ng-class working great with everything defined on the controller $scope: <body ng-app=”thomasApp” ng-controller=”AppCtrl”> <nav hide-show-nav ng-class=”{‘fixed-nav’:fixedNav, ‘hide-nav’:!showNav}”> <ul>…</ul> </nav> … </body> app.controller(“AppCtrl”, function($scope) { $scope.showNav = true; $scope.fixedNav = false; $scope.toggleNav = function() { $scope.showNav = !$scope.showNav;
Continue readingConditional logic in ng-class in directives template
Issue I’m using AngularJS and i’m writing my own directive. I want to use conditional logic in my custom directive. The problem is caused in the template part. Here’s a piece of my code: angular.module(‘myDirectives’).directive(‘widget’, function() { return { replace:
Continue readingAngularjs ng-class class order/precedence
Issue EDIT:It turns out to be a confusion on my side, pls see my own answer. I came across a strange behavior when attempting to reorder the precedence of multiple classes in ng-class. ng-class=”{‘e’:($index%2>0),’btn-primary’:($index>3)}” http://jsfiddle.net/6JjFM/1/ The thing is that no
Continue readingng-class class name which contains a scope variable rendered as null
Issue I have a which utilizes classes based on a particular scope variable. In this case, the scope variable is {{jobSingle.UserFit.Summary.score}} which takes on the values of -1 (when unknown) or 0-10 (when score is known). The span is rendered
Continue readingWhy doesn't ng-class work when simply providing a class name?
Issue Fiddle. I don’t see anything to indicate why this shouldn’t work. The Angular Doc says “If the expression evaluates to a string, the string should be one or more space-delimited class names.” What am I doing wrong in this
Continue readingAngularJS: Change cell class in a dynamically generated table based on cell value
Issue I have a dynamically generated table by the following code: <tbody> <tr ng-repeat=”row in tableType.data.rows track by $index”> <td ng-repeat=”col in row track by $index” class={{getUnitCountCellColor(col)}}>{{col}}</td> </tr> </tbody> The data over which the table is iterated looks like: [[“69123”,
Continue readingAngularjs Scope method not being called by ng-class
Issue I am building an app. My index.html looks like: <html ng-app=’myApp’> <body ng-controller=’mainController’> <div ng-view> </div> </body> </html> My main module js looks like: var myApp = angular.module(‘myApp’,[‘ngRoute’,’mycontrollers’]); myApp.directive(‘countTable’, function(){ return { restrict: ‘E’, scope: {tableType:’=tableType’}, templateUrl: ‘../html/table.html’ };
Continue readingng-class and matching value inside array angularjs
Issue ng-class=”{‘active’ : question.chosen == key}” The above sets my class as active when question.chosen matches key. This means that $scope.question.chosen only has a single value. In the even $scope.question.chosen has [“a”,”b”,”c”] how would I iterate through that with ng-class
Continue readingUse scope attribute of directive as class name in ngClass
Issue I want to use a scope attribute of a directive as the class name in ngClass someModule.directive(“someDirective”, function () { return { restrict: “A”, scope: { styleClass: ‘@’, }, replace: true, template: “<li ng-class='{‘{{styleClass}}:true’}’ />” } } I’ve tried
Continue readingng-class does not apply when expression re-evaluates
Issue This code is from an offline network so I can’t paste it here. I’m summarizing it. I have the following code: <tr ng-repeat=”agent in agents” ng-class=”agent.getClass()”> <td>{{agent.server}}</td> <td>{{agent.status}}</td> </tr> The agents list is loaded via ajax requests. app.js: angular.module(‘agentsApp’,
Continue readingmix use of regular class and ng-class
Issue Want to generate different icons in an ng-repeat: <i class=”fa fa-pencil”></i> <i class=”fa fa-briefcase”></i> … How can I specify only one of the classes using ng-class? If I wrote: <i class=”fa” ng-class=”{{t.icon}}”></i> Then the generated output is <i class=”fa”
Continue readingAngularJS directive – ng-class in ng- repeat should it be a $watcher to toggle style?
Issue I am currently implementing a spike to further my understanding on angular directives etc. The premise is to create a FX watch list on a number of currency pairs. My data feed is set up for my price updates
Continue readingAngularJS Multiple class using expression
Issue I have a table where I need to apply two different classes, using expressions. 1st class is applied based on following expression. {‘Up’:’class-up’, ‘Down’:’class-down’}[a.status] and 2nd class is applied based on bold: !a.read The classes here are class-up, class-down,
Continue readingAngular ngClass evaluation method
Issue I might be doing something wrong but I can’t figure out what. 1 list of tabs I iterate over elements in list to generate tabs. On click, I set a currentTab to the clicked element Incriminated code is: <li
Continue readingAngularjs Change color at a wrapper on radio button checked
Issue I’m a complete newbie in angular. And it’s the whole day that I’m struggling after this thing. This is my code: <div class=”row lines” ng-class=”class” ng-model=”hotel”> <div class=”col-xs-6″> <label class=”control radio”> <input type=”radio” id=”hotel3″ name=”hotel” value=”LeonardodaVinci” ng-model=”hotel”> <span class=”control-indicator”></span>
Continue readingng-class remove class after set time
Issue I’m trying to create a quick animation demo with a button that adds a class on a container to play animation using ng-click. What I want to do is to remove the applied class after a set period of
Continue readingAngularJS – Applying ng-class based on numbers
Issue I understand how to use ng-class for boolean values, e.g: <div ng-class=”{true: ‘success’, false: ‘error’}[IsPositive]”> However, how do i perform based on a numeric value? For example, if i have a $scope.myNumber, which can be any positive or negative
Continue readingConditionally set Angular's ng-class based on state
Issue I would like to conditionally set the class of an element based on the application state (using AngularUI Router). I’ve tried this, but it is not working: <li ng-class=”{active: $state.current.name === ‘state1’}”>State 1</li> <li ng-class=”{active: $state.current.name === ‘state2’}”>State 2</li>
Continue readingangular ng-class from variable
Issue Using Angular I would like to apply class to form field after the form field has been edited. The class name is not stated as string but as variable value which seems to be a problem. Below two snippets
Continue readingChange part of the CSS class using ngClass
Issue I have multiple classes apply to an element. Is it possible to change only 1 class, not the all of the classes? For example, <span ng-class=”{‘result warning’ : error, ‘result passing’ : !error}”></span> As you can see, I have
Continue readingAngular ng-class setting proper class (confirmed in page source) but won't apply styles
Issue Yes…it’s tabular data. So, the question title explains most of what is going on but I’ll provide a few more specifics: I have a model on my controller that contains properties “Name” and “Value”(with possibilities”GOOD” and “BAD”) I have
Continue readingAngularJS: scope change in ngClick gets lost
Issue I have ngClick and ngClass on an element duplicated by ngRepeat: <li ng-class=”{‘active’: $parent.mem.A == $key, ‘not-active’: $parent.mem.A && $parent.mem.A != $key}” ng-repeat=”($key, A) in As” ng-click=”$parent.mem.A = $key”> Inside the li I have a button that changes the
Continue readingError Injecting Multiple Libraries into Angular
Issue I’m getting a weird conflict when using ng-class with either of the ternary operators: <div ng-class=”{‘red’: showDebug, ‘blue’: !showDebug}” >{{showDebug}}</div> <div ng-class=”showDebug ? ‘red’ : ‘blue'” >{{showDebug}}</div> Whereas both of these work fine on their own: <div ng-class=”{‘red’: showDebug}”
Continue readingAngularjs ng-class with ng-grid / swapping css style
Issue I have this very simple angular app using ng-grid. I for some reason don’t know how to apply style based on data. I need to be able to display different status image based on data status Code below: controller:
Continue readingAdding and removing a class from parent div AngularJS
Issue I have 3 boxes each with it’s own button. The button is used to collapse it’s parent div by adding a class of ‘collapsed’ to the parent. I have go the classes being added but I need to get
Continue readingAngularjs ng-class $link
Issue I have a directive “D1” that needs to generate a nested directive “D2” which should use “D1” element width to generate svg content. “D1” directive uses ng-class to dinamically determine dimensions directive.template = “<div ng-class=”col”></div>” Variable col is defined
Continue readingvalidate input with name containing brackets in AngularJS
Issue I have a form input with names containing brackets, e.g.: <form name=”my_form”> <input type=”text” name=”my_form[email]” ng-model=”email” ng-class=”‘mycssclass’: my_form.my_form[email].$invalid”> </form> So, the problem is that Angular is not applying that css class because of the name of my input (my_form[email]),
Continue readingAngular js ng-class false condition not working in ng-repeat
Issue I want to highlight li if that radio is selected. Inside ng-repeat, ng-class true condition is working, but false condition is not working, please check the code below <div ng-init=”friends = [ {name:’John’, age:25, gender:’boy’}, {name:’Jessie’, age:30, gender:’girl’}, {name:’Johanna’,
Continue readingAngularJs Directives: nested ng-class is failing
Issue I’m facing a strange issue with AngularJs Directive when I need to have nested ng-class. Here is a JSFiddle that shows the problem with an hypothetical situation. HTML <div in-directive ng-class=”{ ‘testing1’: 1 == 1 }”></div> Javascript var myApp
Continue readingAngularJS – Apply class to <td> based on ng-switch statement
Issue I have a simple ng-repeat on a <td>. Wihtin the ng-repeat is a ng-switch directive. I want to know how to apply a CSS class to a <td> when a a particular ng-switch condition is met. <td ng-repeat=”deposit in
Continue readingAdding multiple expressions using ng-class in AngularJS
Issue I am trying to set the class .active when the path is http://localhost/#/ or http://localhost/#/main/ as both paths are the same page. Why does ng-class=”{‘class1’ : expression1, ‘class1’ : expression2}” not work? Controller angular.module(‘testApp’) .controller(‘NavmenuCtrl’, function ($scope, $location) {
Continue readingMultiple values in ngClass
Issue I have a controller which gives me the right value for my actions. The possible values are 1, 2, 3, 4. I have checked this and works fine. I created a class, which will only be active when the
Continue readingSelectively applying `ng-class` in an array of items
Issue I have a list of checkboxes. I am attempting to conditionally apply a class to the checked-off item with ng-class when I click its checkbox. The problem with my current setup is it applies the class to all the
Continue readingAngularJS $watch variable and reevaluate ng-class expression
Issue I’m trying to implement a bookmark-like function into my app and have to watch a variable, which stores all the bookmarked ID’s. Based on that variable I have to tell ng-class to reevaluate it’s function expression so the class
Continue readingng-class – Error: Token '-' is at column {2}
Issue I have a problem with ng-class. If the role has admin privileges, it is to add a class-disabled state. Now occurs error html: <label class=”toggle modal-label-box” ng-class=”{state-disabled: checkCanModify()}”> <input type=”radio” name=”radio-toggle” ng-model=”role” value=”guest”> <i data-swchon-text=”ON” data-swchoff-text=”OFF”></i>No role </label> js:
Continue readingng-class and value load using $http
Issue I’ve got partial view with one element which class should depend on value of variable in $scope: <a class=”btn” ng-class=”{‘btn-success’: led == ‘on’}” ng-click=”toggleLed()”>On</a> In controller I load the intial value for led using $http: $scope.led = ‘unknown’; $http.get(‘/green’)
Continue readingConditionally add a class to dynamically generated fields
Issue I’m making some sort of validation using ng-class directive, but there’s a problem when starting to deal with ng-repeat created elements. <div class=”traveler” ng-repeat=”i in getNumber(travelers_count) track by $index” style=”margin-top: 15px”> <div class=”inp-wr wr-traveler”> <input ng-class=”{ ‘has-error’ : valError
Continue readingAngularJS ng-class cannot override Bootstrap dropdown CSS rules
Issue Using AngularJS-1.2.26 directive ng-class, am attempting to override Bootstrap 3.2 CSS rules for dropdown-menu & dropdown-header, but my new font-size, padding, margin are not effecting html display. I am using AJS1.2.26 ng-class successfully to override (BS3 base classes) navbar-brand,
Continue readingAngularJs: ngClass with multiple statements
Issue I need to add two classes through one ng-class definition One looks like {true: ‘bar’, false: ”}[someVar === ‘bar’] And the other looks like {foo: someOtherVar === ‘foo’} If I join them <div ng-class=”{true: ‘bar’, false: ”}[someVar === ‘bar’],{foo:
Continue readingDynamic Tabs for ng-class
Issue I am trying to change the active state of tabs that are created dynamically. Depending on which value is selected, will determine which view I will see and will change the $location. I this code and cannot get the
Continue readingAngularJS – Using Multiple Coniditons on ng-class
Issue I have a using an ng-repeat. The also has a ng-class true/false condition which is working. Am i able to add another condition to my true/false statement? <tr ng-repeat=”data in myData” ng-class=”{true: ‘green’, false: ‘red’}[data.IsPositive]”> <td> {{data.Name}} </td> <td>
Continue readingHow to mix this this two ng-class sentences
Issue I have this two ng-class sentences. How can I mix them into one: ng-class=”[‘step-0’ + main.activeConnectStep]” ng-class=”{‘active’: main.activeConnectStep > 0 }” Solution Using array notation: ng-class=”[‘step-0’ + main.activeConnectStep, main.activeConnectStep > 0 ? ‘active’ : ”]” Answered By – dfsq
Continue readingngTable updates ngClass result in error
Issue I’m using esvit‘ ngTable. to display a big collectiong of data. But when I try to add a ng-class(fn). First rendering it works (displays info class), but when I manipulate the data (as when i change the attribute winner
Continue readingng-class removes a class but does not put it back
Issue In angular.js, I’m trying to apply a set of classes based on the value of a variable on $scope. But when I set a pair of space-delimited classes, ng-class seems to be removing any that are already present (and
Continue readingAngularJS – Sliding down menu on ng-click
Issue I have a menu button that on ng-click used to show and hide. How can i adapt this so that on ng-click the menu slides down and up on close? HTML: <div class=”nav”> <nav class=”primary-nav” ng-show=”showMenu” ng-class=”{true: ‘showMenu’}[showMenu]”> <ul>
Continue readingng-class 3 class types
Issue I liked the ternary operator but right now I’ve 3 values to deal with <li class=”table-view-cell media” ng-class=”detail.keynote ? ‘keynote’ : ‘session'”> javascript detail.keynote = 0 //(class session) detail.keynote = 1 //(class keynote) deail.ketnote = -1 //(class neutral) Any
Continue readinguse of ng-repeat with ng-class and $index
Issue i need different classes to be used for each iteration, following code. Edit: the index is within the li <li class=”table-view-cell bg_{{$index}}” ng-repeat=”agenda in agendas”> <span class=”cell”> <a data-href=”#/agendas/{{agenda.id}}” ng-click=”detail($event, agenda.id)”> <span class=”type”>{{agenda.date}}</span> </a> </span> </li> also Why do
Continue readingAngular, how to set class to the clicked list item and remove from others li items?
Issue I have this list where I’m trying to set class to the clicked list item (but class should be set only for clicked item). I tried to do by this way but without luck: <a href=”” ng-ctrl=”ThemesCtrl” ng-click=”checkThemeContent(theme);” ng-repeat=”theme
Continue readingng-class not working when called
Issue I have this function in my controller: $scope.menus = {}; $http.get(‘web/core/components/home/nav.json’).success(function (data) { $scope.menus = data; $scope.validaMenu(); }).error(function () { console.log(‘ERRO’) }); $scope.m = {}; $scope.validaMenu = function () { for (var i = 0; i < $scope.menus.length; i++)
Continue readingHow active a class in angular when do click in <li> element
Issue <ul> <li ng-click=”catalog.selected = ””>ALL</li> <li ng-click=”catalog.selected = ‘uno'”>UC</li> <li ng-click=”catalog.selected = ‘dos'”>CEM</li> <li ng-click=”catalog.selected = ‘cuatro'”>SMB</li> <li ng-click=”catalog.selected = ‘cinco'”>OTHER</li> </ul> How active any class when do click in and desactivate when click in other (like a menu)
Continue readingUsing a button instead of checkbox for ng-model?
Issue I am using successfully this ng-class code. html <div class=”col-sm-5″ ng-class=”{myDynamicWidth: MYWIDTH}” ng-repeat=”x in names”> … </div> <input type=”checkbox” ng-model=”MYWIDTH”>WIDE css .myDynamicWidth { width: 100%; } How do I achieve the same result with a button instead of a
Continue readingAngularjs ng-class
Issue ng-class is not working with multiple condition. Apply a class when both conditions are true Here open and active class should apply when childActive is equal to header and list items is not empty <li ng-class=”{‘open’:list.items.length&&childActive==header, ‘active’:list.items.length&&childActive==header}” ng-repeat=”list in
Continue readingHow to remove class using ng-class ng-click?
Issue http://plnkr.co/edit/6AEvKuyXai9LbcNjfluN?p=preview I have 3 links, the first 1 has the .active class. When you click on 2 and 3, number 1 should lose the .active class. Right now if you click 2 or 3, they will update correctly, but
Continue readingAngularJs condition class And regular class
Issue here is the problem, I need to apply a conditional class (add ‘card–done’ class if completed is true), and, also add the class stored in task.color. Here’s the code: <!– Card –> <div class=”card” ng-repeat=”task in projectsData[currentProject].tasks track by
Continue readingAngularjs ng-class not updating when using object annotation style
Issue I just noticed that something doesn’t work in Angular (or it doesn’t as I expected it to work) when using object in ng-class. What do I expect? When changing the name of a property in the object, the class
Continue readingAdd classes to adjacent elements dynamically on mouseenter
Issue I’m creating a grid of elements and have a hover effect in place, using CSS transitions, for each element. I’d like to add secondary effects on adjacent x- and y-axis elements as well, creating a cloud effect. I imagine
Continue readingoutput array of class names on to element ng-repeat
Issue 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
Continue readingng-Class – multiple conditions and classes
Issue 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’
Continue readingangular ng-class on a conditional expression for a $scope variable in the controller
Issue 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
Continue readingAngularJS | Conditional Class using ng-class
Issue 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
Continue readingng-repeat value as ng-class for last <td>
Issue <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
Continue readingAngularjs give classes based on variable value
Issue 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! Solution I believe you’re
Continue readingAngular JS highlight row based on radio button state
Issue 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
Continue readingAngularJs ng-class using expression
Issue 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>
Continue readingConditionally apply css with ng-repeat?
Issue I have a data like this: $scope.datas= [["inProgressCounter","31"],["approvedCounter","3"],["pendingCounter","35"],["rejectedCounter","0"]] show them with ng-repeat: <ul> <li ng-repeat="info in datas">{{info[0]}}{{info[1]}}</li> </ul> Now there are 2 requirement. 1, Each li has its own css style, such as, the first li always has biggest
Continue readingAngularjs: Using ng-class to add a class to completed progress step
Issue I am trying to add a class to a completed step indicator on the progress bar but cannot figure out how to do it. A step is completed when a button is clicked on the page and takes the
Continue readingngClass applying CSS while ignoring condition when page loads
Issue 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
Continue readingngClass not rendering properly
Issue 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
Continue readingangular ng-class add class to all except current
Issue 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’)” />
Continue readingng-click / ng-class combination not working as expected with $index
Issue 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>
Continue readingapplying class in ng-repeat if contained in another array
Issue 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,
Continue readingHow to add ng-class based on multiple variable comparison?
Issue My select dropdown, needs the class of btn-success if 2 variables form a JSON object != null. What I’ve tried so far which isn’t working, basically if term.tag and term.id are not null, add the class btn-success to the
Continue readingHow to update ng-class based on ng-change?
Issue I have an ng-repeat that creates several widgets, each with it’s own select dropdown. <div ng-repeat=”item in widget.items” class=”col-md-6″> <select ng-model=”item.chosenTag” ng-change=”widget.updateTag(item)” ng-class=”widget.getButtonClass(item.tag, item.id)”> <option value=”companies” ng-selected=”{{item.tag == ‘companies’}}” changed=”companies”>companies</option> <option value=”news” ng-selected=”{{item.tag == ‘news’}}” changed=”news”>news</option> <option value=”people” ng-selected=”{{item.tag
Continue reading