如何使用 Angular js 有条件地设置特定的类属性？答案

【问题标题】：How to conditionally set specific class property with angular js?如何使用 Angular js 有条件地设置特定的类属性？
【发布时间】：2016-12-02 11:22:50
【问题描述】：

我有 1 个 div，我想在其中有条件地设置此类的背景颜色属性。我正在使用boostrap progress bar，我只想使用下面的类，因为它包含一些进度条的自定义设置。

下面是我的 div：

.statistics .progress-bar {
    background-color: black;
    border-radius: 10px;
    line-height: 20px;
    text-align: center;
    transition: width 0.6s ease 0s;
    width: 0;
}




 <div class="statistics" ng-repeat="item in data">
    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                                    aria-valuemin="0" aria-valuemax="100" ng-style="{'width' : ( item.statistics + '%' )}">
     </div>
  </div>

情况如下：

If statistics > 100
    backgroundcolor=red;
else 
    backgroundcolor=black;

【问题讨论】：

标签： javascript angularjs ng-class ng-style

【解决方案1】：

你可以用简单的表达式来做到这一点

ng-style="<condition> ? { <true-value> } : { <false-value> }"

输出

代码：

<!DOCTYPE html>
    <html ng-app="myApp">

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    </head>

    <body ng-controller="myCtrl">

        <div ng-style="item.statistics > 100 ? { 'background-color':'red', 'width': item.statistics + '%' }: { 'background-color':'yellow', 'width': item.statistics + '%'}">
            <h2>$scope.statistics = {{statistics}}</h2>
        </div>

        <div ng-style="item.statistics2 > 100 ? { 'background-color':'red', 'width': item.statistics2 + '%' } : { 'background-color':'yellow', 'width': item.statistics2 + '%'}">
            <h2>$scope.statistics2 = {{statistics2}}</h2>
        </div>

        <script>
            var myApp = angular.module("myApp", []);

            myApp.controller("myCtrl", ['$scope', function($scope) {
                $scope.item = {};
                $scope.item.statistics = 30;
                $scope.item.statistics2 = 101;
            }]);
        </script>
    </body>

    </html>

【讨论】：

我试过这样但得到错误：ng-style="{'width' : ( item.statistics + '%' ),item.statistics > 100 ? { 'background-color':' a08bcd' } : { 'background-color':'#c1f3ca' }}".语法错误：令牌'。'出乎意料，期待 [}]
@Learning 请根据您的最新要求查看我更新的代码。 As you can see, the background color as well as the width is also dynamic。我相信它现在对你有用。

【解决方案2】：

您可以使用 ng-class 来动态设置 css 类

.statistics .progress-bar {
   background-color: black;
   border-radius: 10px;
   line-height: 20px;
   text-align: center;
   transition: width 0.6s ease 0s;
   width: 0;
   color: black
}

.red {
   color: red
}

<div class="progress-bar" role="progressbar" 
     aria-valuenow="70"
     aria-valuemin="0" aria-valuemax="100" 
     ng-style="{'width' : ( item.statistics + '%' )}"
     ng-class="{ red: item.statistics > 100 }"
>

如果你不想创建额外的类，你可以使用 ng style ：

<div class="progress-bar" role="progressbar" 
    aria-valuenow="70"
    aria-valuemin="0" aria-valuemax="100" 
    ng-style="getItemStyle(item)">

然后在你的控制器中，你必须创建 getItemStyle 函数：

 $scope.getItemStyle = function(item) {
     // determine the color
     var itemColor = item.statistics > 100 ? 'red' : 'black';
     // return object containing the css props
     return {
        'width': item.statistics + '%',
        'color': itemColor
     };
 };

【讨论】：

如果我想设置 2 种或更多颜色，那么我必须为此创建那么多类
是的，您可以向 ng-class 添加条件，例如 ng-class="{ green: item.statistics 100}
对不起，我不想创建一个额外的类来设置颜色属性。相反，我只想更新现有的类背景颜色属性

【解决方案3】：

您可以使用ng-style 更改背景属性或ng-class 进行类操作。

不要忘记像这样使用对象表示法

data-ng-class = {'test-class': condition}

【讨论】：