CODEWITHSUNDEEP
angularjs
JoJo
JoJo

Reputation: 29

Change css style with if statements

Atm i have table that display what status my member has. Is it possible to do like, If member status = Bronze -> td background = bronze? Im sorry if im unclear about the problem, But i want to change color of td background depending on what status the member has. Any suggestion how i can do it? 

var app = angular.module('test', []);
            app.filter('status', function () {
                return function (input) {
                    var statu = input;
                    switch (input) {
                        case 10:
                            statu = 'Bronze';
                            break;
                        case 20:
                            statu = 'Silver';

                            break;
                        case 30:
                            statu = 'Gold';
                            break;
                        case 40:
                            statu = 'Elite';
                            break;
                    }
                    return statu;

                };
            });

Upvotes: 0

Views: 607

Answers (3)

Artyom Pranovich
Artyom Pranovich

Reputation: 6962

You can use ng-class directive.

For example:

.bronze {
  background-color: red;
}
.silver{
  background-color: gray;
}


$scope.items = [
   {color: 'bronze'},
   {color: 'silver'}
];


<div ng-repeat="item in items"
     ng-class="{bronze: item.color == 'bronze', silver: item.color == 'silver'}">
</div>

Upvotes: 1

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

in view pass the member status to changeBgColor function inside the controller

<td ng-style="changeBgColor(member.status)">

In controller,

$scope.changeBgColor = function(status) {
    var statu = status;
    switch (status) {
        case 10:
            statu = 'Bronze';
            break;
        case 20:
            statu = 'Silver';
            break;
        case 30:
            statu = 'Gold';
            break;
        case 40:
            statu = 'Elite';
            break;
      }
      return {'background-color': statu};
}

Upvotes: 0

user4097807
user4097807

Reputation:

To conditionally change a class I suggest ng-class

Ex:

app.controller('TestCtrl', function() {
    $scope.show = false;  

    if(condiiton) {
        $scope.show = true;
    }

});

And augment your HTML like so:

<input ng-class="{ show: classname }">

Read more here if this example doesn't suffice: https://docs.angularjs.org/api/ng/directive/ngClass

Upvotes: 0

Related Questions