Question

在将常规元素类和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

您必须先计算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>

Answer 3

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

使用此代码：

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

一起使用class和ng-class

3 个答案: