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

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

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

How 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