angular: ng-class in ng-repeater , duplicate call

Issue first of all sorry for my English. my problem is: i’ve this simple code: <li ng:repeat=”item in menu.items” ng:class=”getMenuItemClass(item)”> <a ng:href=”#{{item.url}}”>{{item.label}}</a> </li> and this my getMenuItemClass: scope.getMenuItemClass = function(item) { console.log(item) var hashPath = $location.hashPath || ‘/’; if (hashPath

Continue reading

ng-class messing with the order of classes

Issue I have some very simple Angular code which looks like this… <div ng-repeat=”message in data.messages” ng-class=”‘conversationCard-‘ + message.type”></div> It works, but the resulting output looks like this…. <div ng-repeat=”message in data.messages” ng-class=”‘conversationCard-‘ + message.type” class=”ng-scope conversationCard-phone”></div> The problem is

Continue reading

is it possible to combine multiple ng-class

Issue is it possible to avoid repeating the code here by replacing the ng-switch by ng-class. <li ng-repeat=”el in elm.required”> <span ng-switch on=”el.type” > <i class=”icon-file” ng-switch-when=”upload” tooltip=”{{el.name}}” ng-class=”{‘muted’:!el.completed}”></i> <i class=”icon-check” ng-switch-when=”checkbox” tooltip=”{{el.name}}” ng-class=”{‘muted’:!el.completed}”></i> <i class=”icon-calendar” ng-switch-when=”date” tooltip=”{{el.name}}” ng-class=”{‘muted’:!el.completed}”></i> <i

Continue reading

How to change the color of the div based on a value

Issue Here are the scripts and style that I used: <script src=”angular.min.js”></script> <style> .greater { color:#D7E3BF; background-color:#D7E3BF; } .less { color:#E5B9B5; background-color:#E5B9B5; } </style> <script> var app = angular.module(‘MyTutorialApp’, []); app.controller(“controller”, function ($scope) { $scope.chargeability = [{ date: ’15-Sep-13′, max:

Continue reading

ng-class is not applied

Issue I am trying to validate a form using AngularJS. This is my form: <form ng-controller=”LoginCtrl” role=”form” class=”form-horizontal”> <div class=”form-group”> <label for=”email” class=”col-sm-2 control-label”>Email</label> <div class=”col-sm-10″> <input required type=”email” name=”email” ng-model=”email” class=”form-control” ng-class=”{ error: email.$invalid }” id=”email”> </div> </div> </form>

Continue reading

Syntax 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 reading

Angular 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 reading

AngularJS 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 reading

ng-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 reading

ng-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 reading

Broke 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 reading

Angularjs 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 reading

Angularjs 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 reading

Angularjs 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 reading

ng-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 reading

ng-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 reading

How 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 reading

ng-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 reading

use 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 reading

ng-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 reading

Angularjs 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 reading