ng-class not working in AngularJS when defined with scope variable

Question

For my below code ng-class isn't working:

HTML

<div class="row-content" ng-controller="MainController">
  <div class="tabs">
    <div class="col-xs-6">
      <h3 ng-class="{selected: searchType == 'news'}">
        <a ng-click="SetSearchType('news')" 
           href="javascript:void(0)">Alumni News</a>
      </h3>
    </div>
    <div class="col-xs-6">
      <h3 ng-class="{selected: searchType == 'rss'}">
        <a ng-click="SetSearchType('rss')" 
           href="javascript:void(0)">Firm News</a>
      </h3>
    </div>
  </div>
</div>

AnjgularJS

var app = angular.module('ffApp', []);

app.controller('MainController', ['$scope', function($scope) {

    $scope.searchType = 'news';

    $scope.SetSearchType = function(type) {
        $scope.searchType = type;
    }
}]);

Try in quotes: ng-class="{'selected': searchType === 'news'}" — rrd
– rrd, Commented Sep 14, 2017 at 9:07
Can you please create a Minimal, Complete, and Verifiable example? — Stanislav Kvitash
– Stanislav Kvitash, Commented Sep 14, 2017 at 9:07
I think the problem is not in the code you posted, I reproduced it in this plunker and it's working ! — JeanJacques
– JeanJacques, Commented Sep 14, 2017 at 9:11

lin · Accepted Answer · 2017-09-14 14:22:57Z

1

I think there is something wrong with your CSS styles or your $scope.selected param. Please check this runnable demo fiddle and carefully compare it with your solution:

View

<div class="row-content" ng-controller="MainController">
  <div class="tabs">
    <div class="col-xs-6">
      <h3 ng-class="{'selected': searchType == 'news'}">
        <a ng-click="SetSearchType('news')" 
           href="javascript:void(0)">Alumni News</a>
      </h3>
    </div>
    <div class="col-xs-6">
      <h3 ng-class="{'selected': searchType == 'rss'}">
        <a ng-click="SetSearchType('rss')" 
           href="javascript:void(0)">Firm News</a>
      </h3>
    </div>
  </div>
</div>

AngularJS

var myApp = angular.module('myApp', []);

myApp.controller('MainController', function($scope) {
  $scope.searchType = 'news';

  $scope.SetSearchType = function(type) {
    $scope.searchType = type;
  }
});

CSS

.selected a {
  color:red;
}

edited Sep 14, 2017 at 14:22

answered Sep 14, 2017 at 9:53

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JeanJacques Over a year ago

ngClass doesn't need quote, even without, it works. Take a look at this plunker

Aref Zamani · Accepted Answer · 2017-09-14 09:51:28Z

0

put your class in quotes ('')

<div class="row-content" ng-controller="MainController">
                <div class="tabs">
                    <div class="col-xs-6">
                        <h3 ng-class="{'selected': searchType == 'news'}">
                            <a ng-click="SetSearchType('news')" href="javascript:void(0)">Alumni News</a>
                        </h3>
                    </div>
                    <div class="col-xs-6">
                        <h3 ng-class="{'selected': searchType == 'rss'}">
                            <a ng-click="SetSearchType('rss')" href="javascript:void(0)">Firm News</a>
                        </h3>
                    </div>
                </div>

answered Sep 14, 2017 at 9:51

Aref Zamani

2,0622 gold badges23 silver badges42 bronze badges

Collectives™ on Stack Overflow

ng-class not working in AngularJS when defined with scope variable

HTML

AnjgularJS

2 Answers 2

View

AngularJS

CSS

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

AnjgularJS

2 Answers 2

View

AngularJS

CSS

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related