CODEWITHSUNDEEP
javascriptangularjs
eeadev
eeadev

Reputation: 3852

use ng-style with switch statement - angular js

Is is possible to use ng-style along with a function returning a non-boolean value?

I wanted to color different a bg according to a property in my model and I managed to do that

<tr ng-repeat="issue in data.issues|orderBy:orderByField:reverseSort" ng-style="{'background-color': isToday(issue.due_date) ?  'red': 'yellow'}" >
   ...

controller:

    $scope.isToday = function (compareDate) {
        var today = $scope.today;
        return compareDate < today.getFullYear() + '-' + today.getDate() + '-' + today.getMonth();
    }

where the isToday function returns a boolean.

How can I handle the case where my function returns 3 values (or more) and I want to have 3 different background colors according to its result?

Upvotes: 0

Views: 2769

Answers (2)

Zeeshan Hassan Memon
Zeeshan Hassan Memon

Reputation: 8325

I have just tried to give you concept- how you can achieve what you want, please update someFun function according to you needs i.e. date etc

Following example just tries to put different classes based on condition evaluation. If you need some modifications please let me know I will do it right way.

angular.module('app', [])
    .controller('ctrl', function ($scope) {
     
  //sample items
     $scope.items = ['One',
                     'Two',
                     'Three',
                     'Four',
                     'Five',
                     'Six',
                     'Seven',
                     'Eight',
                     'Nine'];
  //this is function where multiple condtions will be handled
  $scope.someFunc = function(index, cond){
    //some sample conditions, write here according to your requirements
    if(index >6 && index%22 && cond == 'c')
     return true;
    if(index%2 && cond == 'a')
     return true;
    if(index%3 && cond == 'b')
     return true;
    else return false;
  }
  
});
.green{ 
  background-color:green;
  border: 1px solid white;
  color:white;
}
.blue{ 
  background-color:blue;
  border: 1px solid white;
}
.red{ 
  background-color:red;
  border: 1px solid white;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in items" ng-class="{ 'blue': someFunc($index, 'a'), 'green': someFunc($index, 'b'), 'red': someFunc($index, 'c') }"> {{item}}
  </div>
</div>

Happy Helping!

Upvotes: 0

Mikhail Shabrikov
Mikhail Shabrikov

Reputation: 8509

Use ngClass. template:

<tr ng-repeat="issue in data.issues|orderBy:orderByField:reverseSort" ng-class="{{ myClass }}" >

css:

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: green;
}

js: 

$scope.myClass = 'three' // or 'one', or 'two'

Upvotes: 2

Related Questions