Ng-style with condition

2020-03-09 11:29发布

站内问答 / 移动开发
1842 6 4

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.

标签： angularjs
举报
6条回答
聊天终结者
2楼-- · 2020-03-09 11:31 
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.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
3楼-- · 2020-03-09 11:37

Try this code,

  <div data-ng-repeat="item in items">
       <div data-ng-style="item.selected && {'background-color':'red'}"> 
           {{item.name}}
       <div> 
    <div>
查看更多
0人赞 添加讨论(0) 举报
神经病院院长
4楼-- · 2020-03-09 11:46

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>
查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
5楼-- · 2020-03-09 11:49

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>

查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
6楼-- · 2020-03-09 11:51

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)

查看更多
0人赞 添加讨论(0) 举报
Anthone
7楼-- · 2020-03-09 11:55

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)