ng-click function using $index as parameter throws Unexpected token error

Question

So I ma trying to loop through an array and create an list item for each object in it.

However when then adding an ng-click to that item i get the following error, even though the code prints out correctly.

Syntax Error: Token '$index' is unexpected, expecting [:]

I have the following code:

<body ng-controller="VideoController as VidCtrl">

<div class="row" id="grid">
    <div ng-repeat="array in videos" ng-show="VidCtrl.isActive({{$index}})">
        <ul class="small-block-grid-3">
            <li ng-repeat="video in array" ng-click="VidCtrl.setVideo({{$index}})">
                <img src="{{video.image}}">

                <div>
                    <h5>{{video.title}}</h5>
                    <p>{{video.ingress}}</p>
                </div>
            </li>
        </ul>
    </div>
    <ul class="pagination">
        <li ng-class="{'current':isActive($index)}" ng-repeat="array in videos"><a ng-click="VidCtrl.setPanel($index)" href="#">{{$index + 1}}</a></li>
    </ul>
</div>

And This is my js:

var videos = [];
var activeVideo = null;

var app = angular.module('webb-tvApp', []);

app.controller('VideoController', function($scope){
    $scope.videos = videos;

    this.activePanel = 0;

    this.setPanel = function(val){
        this.activePanel = val;
    }

    this.isActive = function(val){
        return this.activePanel === val;
    }

    this.setVideo = function(vidIndex){
        console.log(videos[this.activePanel][vidIndex]);
    }
});

The videos array has the following structure.

var videos = [
    [
        {
            image: "foo",
            title: "bar",
            ingress: "foobar",
        },
        {},
        {}
    ],
    [
        {},
        {},
    ]
]

I am new to angular so go easy on me.

I see VidCtrl.isActive({{$index}}), VidCtrl.setVideo({{$index}}) and VidCtrl.setPanel($index). Why did you decide to use different syntax for the same thing in different places? And as some answers already pointed out, two of them is wrong and one of them is correct. — ivarni
– ivarni, Commented Jul 29, 2014 at 7:44

ryeballar · Accepted Answer · 2014-07-29 07:41:42Z

3

When using these directives you can use the variables without interpolation {{}}. Additionally, you can use ng-src with your images instead of using src.

<body ng-controller="VideoController as VidCtrl">

<div class="row" id="grid">
    <div ng-repeat="array in videos" ng-show="VidCtrl.isActive($index)">
        <ul class="small-block-grid-3">
            <li ng-repeat="video in array" ng-click="VidCtrl.setVideo($index)">
                <img ng-src="{{video.image}}">

                <div>
                    <h5>{{video.title}}</h5>
                    <p>{{video.ingress}}</p>
                </div>
            </li>
        </ul>
    </div>
    <ul class="pagination">
        <li ng-class="{'current':isActive($index)}" ng-repeat="array in videos"><a ng-click="VidCtrl.setPanel($index)" href="#">{{$index + 1}}</a></li>
    </ul>
</div>

answered Jul 29, 2014 at 7:41

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tebro Over a year ago

aah, well stupid me thought that since the actual markup (dev tools) show the $index it would be wrong. Thanks, will accept this answer asap.

AlwaysALearner · Accepted Answer · 2014-07-29 07:52:18Z

2

Few things I noticed:

Remove interpolation from inside ng-show and ng-click

<div ... ng-show="VidCtrl.isActive($index)">
    ...
        <li ... ng-click="VidCtrl.setVideo($index)">

And replace src with ng-src

<img ng-src="{{video.image}}">

edited Jul 29, 2014 at 7:52

answered Jul 29, 2014 at 7:41

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Collectives™ on Stack Overflow

ng-click function using $index as parameter throws Unexpected token error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related