Why isn't updating style when ng-class is changed?

Question

Why isn't updating style when ng-class is changed?

In the code below, I am struggling with applying styling based on a dynamic value:

Pug:

div(ng-class="('{{selectedMessageType}}' == 'incoming')?'messageTypeSelected':'messageTypeNotSelected'")

CSS:

.messageTypeSelected{
    background-color: #E8A83C;
    color: #ffffff;
}

.messageTypeNotSelected{
    background-color: #E4E4E4;
}

JS:

$scope.selectedMessageType = 'incoming';
$scope.changeMessageType = function(){
    ($scope.selectedMessageType ==  'incoming')?$scope.selectedMessageType = 'outgoing':$scope.selectedMessageType = 'incoming';
};

The logic to replace {{selectedMessageType}} appears to be correct as per my inspection in the browser's Inspector tool. However, the issue lies in the fact that the styling does not change when the value is updated.

Could you point out any potential errors or improvements in my code?

css angularjs

Answer 1

Answer №1

It is not necessary to use {{}} in the ngClass directive.

Update your code as follows:

<div ng-class="selectedMessageType == 'incoming' ? 'messageTypeSelected' : 'messageTypeNotSelected'"></div>

A functional snippet of code:

(function() {
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.selectedMessageType = 'incoming';
    
    $scope.changeMessageType = function() {
      $scope.selectedMessageType = $scope.selectedMessageType == 'incoming' ? 'outgoing' : 'incoming';
    }
  }
})();

.messageTypeSelected {
  background-color: #E8A83C;
  color: #ffffff;
}

.messageTypeNotSelected {
  background-color: #E4E4E4;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-class="selectedMessageType == 'incoming' ? 'messageTypeSelected' : 'messageTypeNotSelected'">
    <span ng-bind="selectedMessageType"></span>
  </div>
  <hr>
  <button type="button" value="change" ng-click="changeMessageType()">Change class</button>
</body>

</html>

I suggest you take a look at this tutorial

Answer 2

It is not necessary to use {{}} in the ngClass directive.

Update your code as follows:

<div ng-class="selectedMessageType == 'incoming' ? 'messageTypeSelected' : 'messageTypeNotSelected'"></div>

A functional snippet of code:

(function() {
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.selectedMessageType = 'incoming';
    
    $scope.changeMessageType = function() {
      $scope.selectedMessageType = $scope.selectedMessageType == 'incoming' ? 'outgoing' : 'incoming';
    }
  }
})();

.messageTypeSelected {
  background-color: #E8A83C;
  color: #ffffff;
}

.messageTypeNotSelected {
  background-color: #E4E4E4;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-class="selectedMessageType == 'incoming' ? 'messageTypeSelected' : 'messageTypeNotSelected'">
    <span ng-bind="selectedMessageType"></span>
  </div>
  <hr>
  <button type="button" value="change" ng-click="changeMessageType()">Change class</button>
</body>

</html>

I suggest you take a look at this tutorial

Answer 3

Answer №2

The ngClass functionality does not follow the format you provided. It should be used in the following way:

ng-class="{'css-style': condition}"

For example, the condition could be isError == true

Answer 4

The ngClass functionality does not follow the format you provided. It should be used in the following way:

ng-class="{'css-style': condition}"

For example, the condition could be isError == true

Why isn't updating style when ng-class is changed?

Answer №1

Answer №2

Similar questions

loop not functioning properly with file type input

Convert Soundcloud thumbnail into a printable format using the @media print CSS rule

The curious date format of /Date(1427982649000-0400)/ is shrouded in

"Removing the blue initial loader from Filestack during initialization: A step-by-step guide

The slider causing conflicts with widgets and content positioned below it in an HTML layout

Tips for reformatting table row data into multiple rows for mobile screens using ng-repeat in Angular

Animate owlCarousel slide motion in reverse when using the Prev and Next buttons

Is there a way to update the button's value upon clicking it?

While attempting to make my div responsive, it unexpectedly became stuck to the navbar

The method of utilizing React with Redux to display component properties

unusual actions of $http post request with a specific header

Node.js refuses to process posts submitted by AngularJS

Scaling SVG Graphics in Real-Time

Choose a specific item by its name and retrieve its corresponding identifier using Angular

I am attempting to center an image on a webpage while disregarding the margins set on the

Tips for removing red borders on required elements or disabling HTML validation

Incorporate a backdrop to enhance a material icon

What could be causing my website to function flawlessly in Firefox but not in Chrome or Internet Explorer?

Changing background color on scroll using jQuery

How can I reference an html <div> element from an <a href> link within the same html document?