using loop variable in ng-class and ng-click attribute

Question

using loop variable in ng-class and ng-click attribute

The following code creates a list of seven thumbnails and the active image should have the class active (and thumb).

<div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]">
  <img ng-src="images/{{no}}t.jpg" 
    class="thumb" ng-class="{'active': imgNumber == no}" ng-click="change(no)"/>
</div>

The images are displayed correctly, but the class active is not applied to the currently selected image, and the images are not changed on click.

That is the controller:

function Gallery($scope) {
    $scope.imgNumber = "1";
    $scope.change = function(imgNumber) {
        $scope.imgNumber = imgNumber;
    }
}

If I unroll the loop and replace no with the current image number everything works as expected.

Why doesn't work the expression in ng-class and ng-click?

javascript
css
angularjs

Answer 1

I can't see anything wrong with it. I've tried to emulate it with this jsFiddle: http://jsfiddle.net/63xze/ and it seems to work as expected. Could you edit that jsFiddle to illustrate your issue?

Since I can't post a jsFiddle without code, here's what my jsFiddle looks like:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.controller('MainCtrl', ['$scope', function($scope){
        $scope.imgNumber = "1";
        $scope.change = function(imgNumber) {
            $scope.imgNumber = imgNumber;
        }
    }]);
    </script>
    <style>
    .img {
        background: red;
        width: 15px;
        height: 15px;
    }
    .img.active {
        background: black;
    }
    </style>
</head>
<body ng-controller="MainCtrl">
    <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]">
        <div class="img" class="thumb" ng-class="{'active': imgNumber == no}" ng-click="change(no)">{{no}}</div>
    </div>
</body>
</html>

Answer 2

The problem and hence the solution was outside of my example:

<p ng-controller="Gallery"> <!-- p can not contain div! -->
    <img ng-src="images/{{imgNumber}}.jpg"/>
    <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]">
        <img ng-src="images/{{no}}t.jpg" class="thumb" 
            ng-class="{'active': imgNumber == no}" ng-click="change(no)"/>
    </div>
</p>

The Problem is the <p> tag which contains a <div> what is simply an illegal nesting!

If I replace p with div everything works as expected.

<div ng-controller="Gallery">
    <img ng-src="images/{{imgNumber}}.jpg"/>
    <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]">
        <img ng-src="images/{{no}}t.jpg" class="thumb" 
            ng-class="{'active': imgNumber == no}" ng-click="change(no)"/>
    </div>
</div>

Answer 3

Check out the documentation on expressions http://docs.angularjs.org/guide/expression

Conditions are not allowed:

No Control Flow Statements: you cannot do any of the following in angular expression: conditionals, loops, or throw.

The solution is to create a method in your controller. Even for something as simple as equals. It is possible to add this method to the $rootScope if you want to use it in many controllers.

If, on the other hand, you do want to run arbitrary JavaScript code, you should make it a controller method and call the method.