一起使用 class 和 ng-class

Question

我在同时应用常规元素 class 和 ng-class 时遇到问题。在我的代码中，ng-class css 属性取决于一个控制器变量，其值在 ng-repeat 中的每次迭代中都会发生变化。主要问题是，对于连续出现的 'dependent' 变量的两个或多个值，ng-class 属性不适用于第一个值，它保留前一个 css 属性.

如果 'dependent' 变量值等于 100，则应显示为红色，否则所有其他值将应用蓝色，方法是选择 ng-class changeToRed 或 changeToBlue。

<style type="text/css">
.simpleCss{
font-size: 14px;
}
.changeToRed{
color : red;
}
.changeToBlue{
color : blue;
}

</style>

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

<script type="text/javascript">
angular.module('test-app', []).controller('testAppCntrl', function($scope){

 var objects = [
 {id : 1, start : 10, end : 15},//current = 18
 {id : 2, start : 10, end : 11},
 {id : 3, start : 10, end : 20},
 {id : 4, start : 10, end : 23},
 {id : 5, start : 10, end : 25},
 {id : 6, start : 10, end : 14},
 {id : 7, start : 10, end : 13},
 {id : 8, start : 10, end : 12},
 {id : 9, start : 10, end : 20},
 {id : 10, start : 10, end : 28}
 ];
 $scope.objects = objects;

 $scope.calculate = function(start, end, current){//start, end, current
 if(current<end)
 {
    $scope.dependent = ((current-start)/(end-start)) * 100;
 }
 else
    $scope.dependent = 100;

 return $scope.dependent;
}

});

</script>
</head>
<body ng-app='test-app' ng-controller='testAppCntrl'>

<div ng-repeat="obj in objects">
    <h6 class="simpleCss" ng-class="{{dependent < 100}} ? 'changeToBlue' : 'changeToRed'" > {{calculate(obj.start,obj.end,18)}}</h6>
</div>

</body>
</html>

希望得到最佳解决方案。谢谢。

Answer 1

你在 ng-class 里面的语法是错误的，它应该是这样的：

<h6 ng-class="{'changeToBlue': dependent = 100, 'changeToRed': dependent != 100}">...</h6>

查看 documentation 以获取有关 ng-class 用法的更多信息。

Answer 2

If the dependent variable value is equal to 100 should appear in red, else for all other values blue will apply, by selecting ng-class either changeToRed or changeToBlue.

使用此代码：

ng-class="{ 'changeToRed' : dependent == '100', 'changeToBlue' : dependent != '100' }"

Answer 3

必须先计算dependent变量，然后再使用：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>

  <style type="text/css">
    .simpleCss {
      font-size: 14px;
    }
    .changeToRed {
      color: red;
    }
    .changeToBlue {
      color: blue;
    }
  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
  </script>

  <script type="text/javascript">
    angular.module('test-app', []).controller('testAppCntrl', function($scope) {

      var objects = [{
          id: 1,
          start: 10,
          end: 15
        }, //current = 18
        {
          id: 2,
          start: 10,
          end: 11
        }, {
          id: 3,
          start: 10,
          end: 20
        }, {
          id: 4,
          start: 10,
          end: 23
        }, {
          id: 5,
          start: 10,
          end: 25
        }, {
          id: 6,
          start: 10,
          end: 14
        }, {
          id: 7,
          start: 10,
          end: 13
        }, {
          id: 8,
          start: 10,
          end: 12
        }, {
          id: 9,
          start: 10,
          end: 20
        }, {
          id: 10,
          start: 10,
          end: 28
        }
      ];
      $scope.objects = objects;

      $scope.calculate = function(start, end, current) { //start, end, current
        if (current < end) {
          $scope.dependent = ((current - start) / (end - start)) * 100;
        } else
          $scope.dependent = 100;

        return $scope.dependent;
      }

    });
  </script>
</head>

<body ng-app='test-app' ng-controller='testAppCntrl'>

  <div ng-repeat="obj in objects">
    <h6 class="simpleCss" ng-class="{{calculate(obj.start,obj.end,18) < 100}} ? 'changeToBlue' : 'changeToRed'"> {{dependent}}</h6>
  </div>

</body>

</html>

一起使用 class 和 ng-class

using class and ng-class together

html

angularjs

ng-repeat

ng-class