using class and ng-class together
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.
Answer
Your syntax inside the ng-class is wrong, it should look like this:
<h6 ng-class="{'changeToBlue': dependent = 100, 'changeToRed': dependent != 100}">...</h6>
Check the documentation for more information on the usage of ng-class.