Ng-style with condition

Question

How can I apply style on some item in a list that satisfy listed condition:

        <div data-ng-repeat="item in items">
           <div data-ng-style="{'background' : 'red' : item.selected}> {{item.name}}
           <div> 
        <div>

How is it possible to apply this style on item that is selected.

possible duplicate of [Angular ng-style with a conditional expression](http://stackoverflow.com/questions/19375695/angular-ng-style-with-a-conditional-expression) — Deblaton Jean-Philippe, Aug 10 '15 at 10:51
Why do you want to use `ng-style`? It's so simple with `ng-class`. See my answer. — ndsmyter, Aug 10 '15 at 10:52
@ndsmyter I know it's better approach to use ng-class, but I was trying to avoid creating .css file or creating something withing — mehmedju, Aug 10 '15 at 10:57
@mehmedju it would have been better of you added that information to your question. Now this wasn't clear if you knew it or not. For example saying that you know it can be done with `ng-class` but you want to prevent that, and why you want to prevent that. Don't really understand why you want to avoid using classes though... — ndsmyter, Aug 10 '15 at 11:05

Shijin TR · Answer 1 · 2017-07-18T20:23:29.337

21

Try this code,

  <div data-ng-repeat="item in items">
       <div data-ng-style="item.selected && {'background-color':'red'}"> 
           {{item.name}}
       <div> 
    <div>

edited Jul 18 '17 at 20:23

answered Aug 10 '15 at 10:53

Shijin TR

7,516
10
55
122

score 11 · Accepted Answer · answered Aug 10 '15 at 10:50

I think it would be best to use ng-class for your problem. You then make a new class for the red background, eg:

<style>
    .red-background{
        background-color: red;
    }
</style>

And then use this class according to the condition:

<div data-ng-class="{'red-background':item.selected}">{{item.name}}</div>

(don't forget the single quotes around the class name, they are easily overlooked)

score 4 · Answer 3 · answered May 11 '17 at 21:31

4

Ironically I just looked this up, the correct thing is to obviously use classes as they have this designed within them.

However, you can do conditionals thanks to the JavaScript ability to return the last value with &&

<div ng-style="conditional && { 'background' : 'red' } || !conditional && { 'background' : 'green' }"> show me the background </div>

answered May 11 '17 at 21:31

Vince

757
1
8
16

But if we change the condition at runtime, say when a button is clicked and update the conditional value, it doesn't update it. Even though we see the updated value of conditional in inspect. – arqam Jul 17 '17 at 05:43
I still say use ng-class which is the best way of handling this. Also you could change the ng-style="{'background' : Color.Background }" and just use $scope.Color = { Background : "red" }; – Vince Jul 18 '17 at 11:46

score 2 · Answer 4 · answered Aug 10 '15 at 10:59

Please refer below

function simpleController($scope) {
    $scope.items = [

    {
        selected: false,
        name: 'first'
    }
,
       {
        selected: true,
        name: 'second'
    }
    ];
}

.red
{
background:red}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app>
    
    <body ng-controller="simpleController">
      <div data-ng-repeat="item in items">
           <div ng-class="{'red' :  item.selected}"> {{item.name}}
           <div> 
        <div> 
  
  </body>

</html>

Kim Yang Jacobsen · Answer 5 · 2018-02-21T14:32:34.423

2

ng-style="{'background': (desktop) ? '#ffffff' : ''}"

Explanation: {CssProperty: Condition ? if condition is True : If condition is False}

CssProperty : meaning background, color, font-size etc..

Condition: just like a If statment..

after the : define the property value for the true and false Condition .for the the CssProperty.

here we have no value if condition is false.

any true or false value should be the Proper value for the CSSProperty. So for background it's #ffffff or White.

edited Feb 21 '18 at 14:32

answered Feb 01 '18 at 13:34

Kim Yang Jacobsen

87
4

4

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, as this reduces the readability of both the code and the explanations! – Blue Feb 01 '18 at 13:35

score 0 · Answer 6 · edited May 23 '17 at 10:31

You can use this method described further here. (example below)

angular.module('app', []); 
function myCtrl($scope){
   $scope.items = [
     { name: 'a', selected: 'false' },
     { name: 'b', selected: 'true' }
   ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<html ng-app>
  <body ng-controller="myCtrl">
    <div ng-repeat="item in items">
      <div ng-style="{color: {true:'red'}[item.selected]}">{{item.name}}</div>
    </div>
  </body>
</html>

score 0 · Answer 7 · answered May 07 '20 at 08:02

0

On Angular >9 the syntax is following:

 [ngStyle]="{'background-color': item.selected ? '#f00' : ''}"

Make sure you do not add a semicolon (;) at the end of the style expression as this breaks the functionality

answered May 07 '20 at 08:02

F.H.

1,456
1
20
34

Ng-style with condition

7 Answers7

Linked