如何用angular js有条件地设置特定的class 属性？

Question

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

下面是我的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;

Answer 1

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

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

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

Answer 2

可以使用ng-class动态设置cssclasses

.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 }"
>

如果您不想创建额外的 classes，您可以使用 ng 样式：

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

Answer 3

你可以使用简单的表达式来完成

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>

如何用angular js有条件地设置特定的class 属性？

How to conditionally set specific class property with angular js?

javascript

angularjs

ng-class

ng-style