CODEWITHSUNDEEP
htmlangularjsangularjs-ng-repeatng-class
ManjushaDC
ManjushaDC

Reputation: 190

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.

Upvotes: 3

Views: 9496

Answers (3)

muenchdo
muenchdo

Reputation: 2181

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.

Upvotes: 1

Sergey Ratnikov
Sergey Ratnikov

Reputation: 1296

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>

Upvotes: 1

whoknows
whoknows

Reputation: 306

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.

Use this code:

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

Upvotes: 0

Related Questions