CODEWITHSUNDEEP
angularjs
n.Ken
n.Ken

Reputation: 133

change color with ng-style and different conditions

I want to parameter changes of color of my td so I try this and it's working fine: {{item.name}}

but when I try to use different conditions for example for

item.name : xxx =>color : red

item.name: yyy =>color : yellow

item.name: aaa =>color : blue

Upvotes: 4

Views: 17944

Answers (5)

user7784271
user7784271

Reputation:

## controllerjs ##

 var app = angular.module("app",[]);

    app.controller("ctrl" , function($scope){
  $scope.Unresolved = [{"status":"Assigned"},{"status":"Unassigned"},{"status":"CustomerWait"}];
  $scope.getStyle = function(status){
    console.log('color============>>>>>>>>>',status);
      if(status == "Unassigned")
        return {'background-color':'#d9534f'};
      if(status == "Assigned")
        return {'background-color':'#337ab7'};
      if(status == "CustomerWait")
        return {'background-color':'green'};
   });

       })

jade

script(src='js/angularjs/angular.js')(you using version)
tr(ng-repeat='unresolved in unresolveds track by $index')
  td
    select.colorSel(ng-model='unresolved.status',ng-style='getStyle(unresolved.status)')
      option(value='Assigned',) Assigned
      option(value='Unassigned') Unassigned
      option(value='Customer wait') Customer wait

Upvotes: 0

Hadi
Hadi

Reputation: 17289

try this.

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.items = [{"name":"ali"},{"name":"reza"},{"name":"amir"}];
  
  
  $scope.getStyle = function(name){
    if(name == "ali")
      return {'color':'red'};
    if(name == "reza")
      return {'color':'blue'};
    if(name == "amir")
      return {'color':'green'};
    }
  
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
  
  <div ng-repeat="item in items">
      <p ng-style ="getStyle(item.name)">{{item.name}}</p>
    </div>
            
</div>

Upvotes: 5

Rani Radcliff
Rani Radcliff

Reputation: 5084

I can't give you an exact answer as you did not post enough of your code, but see if this helps:

<div ng-if="item.name == xxx"><div ng-style="{'background-color': yourColor}"></div>

"yourColor" can be either a direct color name like "red" or a scope variable.

You can also use ng-class if your colors are in a class like below:

<div ng-class="{'myColor1': item.name == xxx, 'myColor2': item.name == yyy, 'myColor3': item.name == zzz}"></div>

Hope this helps!

Upvotes: 2

Olli-Pekka Sirvi&#246;
Olli-Pekka Sirvi&#246;

Reputation: 1

CSS: 

.item-color1 {
 background-color: red;
 }
.item-color2 {
 background-color: yellow;
 }

 .item-color3 {
 background-color: blue;
 }

in html

<td ng-class="{item-color1: item.name == xxx , item-color2: item.name == yyy, item-color3: item.name == aaa}">

Upvotes: 0

j2L4e
j2L4e

Reputation: 7050

you can apply classes conditionally:

<td ng-class="{red: item.name === 'xxx', yellow: item.name === 'yyy'}">
    {{ item.name }}
</td>

then use CSS to set the colors:

td.red { background-color: red; }
td.yellow { background-color: yellow; }

Upvotes: 0

Related Questions