Search code examples
htmlangularjsangularjs-ng-repeatng-class

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.

Solution

  • 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>