CODEWITHSUNDEEP
angularjs
mehmedju
mehmedju

Reputation: 311

Ng-style with condition

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.

Upvotes: 14

Views: 82304

Answers (7)

F.H.
F.H.

Reputation: 1664

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

Upvotes: 0

Kim Yang Jacobsen
Kim Yang Jacobsen

Reputation: 87

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.

Upvotes: 2

Shijin TR
Shijin TR

Reputation: 7756

Try this code,

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

Upvotes: 21

Vince
Vince

Reputation: 787

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>

Upvotes: 4

Kit
Kit

Reputation: 3578

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>

Upvotes: 0

Vaibhav Shah
Vaibhav Shah

Reputation: 528

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>

Upvotes: 2

ndsmyter
ndsmyter

Reputation: 6605

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)

Upvotes: 11

Related Questions