angular ng-class if-else expression example

Sam Deering Sam Deering expressions

So you want an angular if else class something like this:

JavaScript
1
2
3
 
class="{test: obj.value1 == 'someothervalue'}"
 

or

JavaScript
1
2
3
 
ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}
 

If you want to include a scope variable as a class, you can’t use ng-class. So with Bootstrap classes you could do something like this to get an error class appear if your login form comes back with incorrect password (or such) and a success class if it’s a correct login.

Image

Image

Login controller.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    $scope.formMessage = "";
    /* alert-success, alert-warning, alert-info, alert-danger */
    $scope.formMessageClass = "alert-info";
 
    $scope.$on('$auth:loginSuccess', function (event, data) {
        console.log("LoginController:",event,data);
        $scope.formMessageClass = "alert-success";
        $scope.formMessage = "Login success.";
    });
 
    $scope.$on('$auth:loginFailure', function (event, data) {
        console.log("LoginController:",event,data);
        $scope.formMessageClass = "alert-danger";
        $scope.formMessage = "Username or password incorrect.";
    });
 

HTML

JavaScript
1
2
3
4
 
  <!-- Form error/success messgaes -->
  <div class="alert form-messages {{formMessageClass}} alert-dismissable" ng-show="formMessage">{{ formMessage }}</div>
 

Sam Deering
Sam Deering
Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and love to share what he learns.

10 thoughts on “angular ng-class if-else expression example”

  5. Good Article on Angularjs . It is possible show alert css class without use of angularjs expression . Means define something into css class ? I read many article on ng if else , one good article here – http://goo.gl/bZGU6t

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *