一起使用class和ng-class

这里我在将常规元素类和ng-class应用在一起时遇到了一个问题。在我的代码中，ng-class css属性取决于一个控制器变量，其值随ng-repeat中的每次迭代而改变。主要的问题是，对于两个或更多个依赖变量的值依次出现，ng-class属性不适用于第一个值，它保留了以前的css属性。一起使用class和ng-class

如果“从属”变量值等于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>

希望的最佳解决方案。谢谢。

来源

2015-09-16 ManjiM

我认为你有内部的格式不正确纳克级 – whoknows

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

来源

2015-09-16 07:57:16

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

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

检查documentation上的ng-class使用的详细信息。

来源

2015-09-16 07:43:32 muenchdo

如果依赖变量值是等于100应该出现在红，否则用于蓝色将应用于所有其他值，通过选择纳克级或者changeToRed或changeToBlue。

使用此代码：

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

来源

2015-09-16 07:43:46 whoknows

一起使用class和ng-class

回答

相关问题