how to set class for variable in ng-repeat

Question

I have for example variable 5 which I described in scope, I did range which calculating around this variable, now I have to show this variable and set the css.class for this variable. How can I do that?

this my example in code fiddle

Answer 1

Create a function that returns your preferred css class based on a value:

$scope.getClass = function(n) {
    /*example implementation*/
    if (n == 5) {
        return "red";
    } else {
        return "normal";
    }
  };

then inside ng-class property use this function:

<li ng-repeat="n in range(5,15)" ng-class="getClass(n)">test {{n}}</li>

jsfiddle

UPDATE:

Using your suggestions I've modified my solution. You can solve your problem like this: Let's assume you have a value set in your scope:

$scope.myvalue = 5;

then inside range function you'll have to add your value (it can be at the end):

$scope.range = function(min, max, step){
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step) input.push(i);
    input.push($scope.myvalue); //insert value that has to be highlighted
    return input;
  };

Then the array before you pass it to ng-repeat:

<li ng-repeat="n in range(0, 9, 3) | orderBy:identity" ng-class="{'red' : n == myvalue}">test {{n}}</li>

and add this to controller (so that orderBy work):

$scope.identity = angular.identity;

or if you're using AngularJS above 1.3.0-rc5 you can simply use (without entity declaration) (see related answer):

<li ng-repeat="n in range(0, 9, 3) | orderBy" ng-class="{'red' : n == myvalue}">test {{n}}</li>

See that in this case you don't need getClass() function anymore - you can just compare n to myvalue.

fiddle with new solution