I am attempting to utilize AngularJS in order to change the class name of a div element. Despite following the guidance provided in this answer, I am encountering difficulties as the class name is not updating in my view.
Below is the code from my view:
<div ng-class="class">{{class}}</div>
<button ng-click="changeClass()">Change Class</button>
And here is the content of my app.js file:
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.controller("myApp", function ($scope) {
$scope.class = "red";
$scope.changeClass = function () {
alert('a');
if ($scope.class === "red")
$scope.class = "blue";
else
$scope.class = "red";
};
});
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
title: 'Dashboard',
templateUrl: 'views/dashboard.html',
controller: 'authCtrl',
role: '0'
})
.otherwise({
redirectTo: '/login'
});
}
])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
var nextUrl = next.$$route.originalPath;
if (localStorage.getItem("serviceUserId") === null) {
$location.path("/login");
} else {
if (nextUrl == '/') {
$location.path("/dashboard");
}
}
});
});
Can anyone help me identify what mistake I might be making and provide guidance on how to rectify it?