Question

如何在满足列出条件的列表中的某个项目上应用样式：

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

如何在所选项目上应用此样式。

Answer 1

试试这段代码，

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

Answer 2

我认为最好使用ng-class来解决您的问题。然后，您为红色背景创建一个新类，例如：

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

然后根据条件使用此类：

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

（别忘了课名周围的单引号，很容易被忽视）

Answer 3

请参阅以下

＆＃13;

function simpleController($scope) {
    $scope.items = [

    {
        selected: false,
        name: 'first'
    }
,
       {
        selected: true,
        name: 'second'
    }
    ];
}

＆＃13;

.red
{
background:red}

＆＃13;

<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>

＆＃13;

Answer 4

具有讽刺意味的是，我只是看了这个，正确的是显然使用类，因为他们已经设计了这些类。

但是，由于JavaScript能够使用＆amp;＆amp;

返回最后一个值，因此您可以执行条件操作

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

Answer 5

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

说明： {CssProperty：条件？如果condition为True：如果condition为False}

CssProperty：意为背景，颜色，字体大小等。

条件：就像一个If statment ..

之后：为CssProperty定义true和false Condition的属性值。

如果条件为假，我们没有值。

任何true或false值都应该是CSSProperty的正确值。所以对于背景来说，它是#ffffff或White。

Answer 6

您可以使用此方法进一步here。（以下示例）

＆＃13;

FILTER<-"TRANS > 0"                                                  
max_rows_cols <- 100000000000000000000 

data1 <- rxDataStep(inData = data1,transformObjects=list(Filter=FILTER),
rowSelection =**noquote(Filter)** ,overwrite = TRUE,maxRowsByCols=max_rows_cols)

＆＃13;

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

＆＃13;

Answer 7

在Angular> 9上，语法如下：

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

确保不要在样式表达式的末尾添加分号（;），因为这会破坏功能

Ng风格的条件

7 个答案: