ManjiM ManjiM - 3 months ago 15
AngularJS Question

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

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>

Comments