带条件的 Ng 风格答案

【问题标题】：Ng-style with condition带条件的 Ng 风格
【发布时间】：2015-08-10 10:46:56
【问题描述】：

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

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

如何将这种样式应用到选中的项目上。

【问题讨论】：

看看 ngClass。可能是更好的方法。
当然可以，但在这种情况下我必须使用 ng-style。
Angular ng-style with a conditional expression 的可能重复项
为什么要使用ng-style？ ng-class 就是这么简单。看我的回答。
@ndsmyter 我知道使用 ng-class 是更好的方法，但我试图避免创建 .css 文件或在 html 文件中创建带有

标签： angularjs

【解决方案1】：

试试这个代码，

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

【讨论】：

【解决方案2】：

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

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

然后根据条件使用这个类：

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

（别忘了类名两边的单引号，很容易被忽略）

【讨论】：

【解决方案3】：

具有讽刺意味的是，我刚刚查了一下，正确的做法显然是使用类，因为它们在其中设计了这个。

但是，由于 JavaScript 能够使用 && 返回最后一个值，您可以执行条件语句

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

【讨论】：

但是如果我们在运行时改变条件，比如当一个按钮被点击并更新条件值时，它不会更新它。即使我们在检查中看到条件的更新值。
我仍然说使用 ng-class 是处理这个问题的最佳方式。您也可以更改 ng-style="{'background' : Color.Background }" 并使用 $scope.Color = { Background : "red" };

【解决方案4】：

请参考下面

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>

【讨论】：

【解决方案5】：

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

说明： {CssProperty：条件？ if condition is True : If condition is False}

CssProperty : 表示背景、颜色、字体大小等。

条件：就像一个 If 语句..

之后：为CssProperty定义真假条件的属性值。

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

任何真或假值都应该是 CSSProperty 的正确值。所以对于背景，它是#ffffff 或白色。

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性 cmets 挤满你的代码，因为这会降低代码和解释的可读性！

【解决方案6】：

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

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>

【讨论】：

【解决方案7】：

在 Angular >9 上，语法如下：

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

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

【讨论】：