How to conditionally set specific class property with angular js?

Question

I have 1 div in which I want to conditionally set background color property of this class. I am using boostrap progress bar and I want to use below class only because it contains some custom settings for progress bar.

Below is my div:

.statistics .progress-bar {
    background-color: black;
    border-radius: 10px;
    line-height: 20px;
    text-align: center;
    transition: width 0.6s ease 0s;
    width: 0;
}




 <div class="statistics" ng-repeat="item in data">
    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                                    aria-valuemin="0" aria-valuemax="100" ng-style="{'width' : ( item.statistics + '%' )}">
     </div>
  </div>

Condition is like below :

If statistics > 100
    backgroundcolor=red;
else 
    backgroundcolor=black;

Raman Sahasi · Accepted Answer · 2016-07-28 10:20:34Z

3

You can do it using simple expression

ng-style="<condition> ? { <true-value> } : { <false-value> }"

Output

Code:

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

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

    <body ng-controller="myCtrl">

        <div ng-style="item.statistics > 100 ? { 'background-color':'red', 'width': item.statistics + '%' }: { 'background-color':'yellow', 'width': item.statistics + '%'}">
            <h2>$scope.statistics = {{statistics}}</h2>
        </div>

        <div ng-style="item.statistics2 > 100 ? { 'background-color':'red', 'width': item.statistics2 + '%' } : { 'background-color':'yellow', 'width': item.statistics2 + '%'}">
            <h2>$scope.statistics2 = {{statistics2}}</h2>
        </div>

        <script>
            var myApp = angular.module("myApp", []);

            myApp.controller("myCtrl", ['$scope', function($scope) {
                $scope.item = {};
                $scope.item.statistics = 30;
                $scope.item.statistics2 = 101;
            }]);
        </script>
    </body>

    </html>

edited Jul 28, 2016 at 10:20

answered Jul 28, 2016 at 8:11

Raman Sahasi

32.1k9 gold badges63 silver badges74 bronze badges

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

2 Comments

I Love Stackoverflow Over a year ago

I tried like this but getting error:ng-style="{'width' : ( item.statistics + '%' ),item.statistics > 100 ? { 'background-color':'a08bcd' } : { 'background-color':'#c1f3ca' }}".Syntax Error: Token '.' is unexpected, expecting [}]

Raman Sahasi Over a year ago

@Learning Please see my updated code as per your latest requirements. As you can see, the background color as well as the width is also dynamic. I'm sure it will work for you now.

Olivier Boissé · Accepted Answer · 2016-07-28 08:20:52Z

1

You can use ng-class to set dynamically css classes

.statistics .progress-bar {
   background-color: black;
   border-radius: 10px;
   line-height: 20px;
   text-align: center;
   transition: width 0.6s ease 0s;
   width: 0;
   color: black
}

.red {
   color: red
}

<div class="progress-bar" role="progressbar" 
     aria-valuenow="70"
     aria-valuemin="0" aria-valuemax="100" 
     ng-style="{'width' : ( item.statistics + '%' )}"
     ng-class="{ red: item.statistics > 100 }"
>

If you don't want to create extra classes, you can use ng style :

<div class="progress-bar" role="progressbar" 
    aria-valuenow="70"
    aria-valuemin="0" aria-valuemax="100" 
    ng-style="getItemStyle(item)">

Then in your controller, you have to create the getItemStyle function :

 $scope.getItemStyle = function(item) {
     // determine the color
     var itemColor = item.statistics > 100 ? 'red' : 'black';
     // return object containing the css props
     return {
        'width': item.statistics + '%',
        'color': itemColor
     };
 };

edited Jul 28, 2016 at 8:20

answered Jul 28, 2016 at 7:56

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

3 Comments

I Love Stackoverflow Over a year ago

What if i want to set 2 or more colors then i have to create that many classes for that

Olivier Boissé Over a year ago

yes and you can add conditions to ng-class, i.e ng-class="{ green: item.statistics < 50, red: item.statistics > 100} for example

I Love Stackoverflow Over a year ago

sorry but i dont want to create an extra class just for setting color property.instead i would like to update existing class background color property only

Drag13 · Accepted Answer · 2016-07-28 07:47:20Z

0

You can use ng-style for changin background property or ng-class for class manipulation.

Do not forget to use object notation like this

data-ng-class = {'test-class': condition}

answered Jul 28, 2016 at 7:47

Drag13

6,0281 gold badge22 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to conditionally set specific class property with angular js?

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related