Menu
Here I am facing a problem when applying regular element class and ng-class together. In my code ng-class css property depends upon a controller variable whose value changes for every iteration in ng-repeat. The main issue is that for two or more values of 'dependent' variable appearing successively, ng-class property doesn't applies to first value, it retains the previous css property.
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.
<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>
Hope for the best solution. Thank you.
836
asked Jun 27 '26 18:06
You must calculate dependent variable at first, and then use it:
<!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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
