Syntax Error: Token '{' Invalid Key - Errors even when displaying correctly

Question

I'm struggling here (I am new to programming still), I have an ng-repeat that is repeating a list (page on Pages) which displays the correct number on the front end (i.e. 1) but, when I try and use the same for the ng-click, it will throw this error:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 31 of the expression [getCtrlScope().currentPage = {{ page }}] starting at [{ page }}].

What is strange is that it will display it correctly within the HTML code correctly but will not function.

Code:

<li class="page-item" ng-repeat="page in Pages">
    <a class="page-link" ng-click="getCtrlScope().currentPage = {{ page }}">{{ page }}</a>
</li>

What shows when rendered in HTML:

<li class="page-item ng-scope" ng-repeat="page in Pages">
   <a class="page-link waves-effect ng-binding" ng-click="getCtrlScope().currentPage = 2">2</a>
</li>

JS

var MyApp = angular.module('MyApp', []);

MyApp.controller('MyCtrl', function ($scope, $filter) {
    $scope.Users = tJSONData;
    $scope.currentPage = 0;
    $scope.pageSize = 3;
    $scope.search = '';
    $scope.Pages = [1, 2, 3];

    $scope.getData = function () {
        return $filter('filter')($scope.Users, $scope.search)
    }

    $scope.updatePage = function() {
        $scope.$apply(function () {
            $scope.Users = tJSONData
        })
    }

    $scope.numberOfPages = function () {
        return Math.ceil($scope.getData().length / $scope.pageSize);
    }

    $scope.getCtrlScope = function () {
        return $scope;
    }
});

MyApp.filter('startFrom', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

I've looked around but pretty much all the fixes have been by removing {{ }}, some it has worked for because it was rendering incorrectly but it seems mine is rendering correctly.

If anyone has any ideas, it'd be a great help :)

@Pengyy Really gonna be honest, I have tried that but it didn't work before, it did now, I have been on this for a good few hours, Thanks :) Want to make it an answer so I can give credit to you? — Xecuter34
– Xecuter34, Commented May 24, 2017 at 15:45

Amadou Beye · Accepted Answer · 2017-05-24 16:04:09Z

1

You can access scope variables directly from view so you don't need getCtrlScope() function. Also all variables inside angular directives are scopes so you don't need brackets {{}}

Try this

<li class="page-item" ng-repeat="page in Pages">
    <a class="page-link" ng-click="currentPage = page">{{ page }}</a>
</li>

answered May 24, 2017 at 16:04

Amadou Beye

2,8583 gold badges21 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Syntax Error: Token '{' Invalid Key - Errors even when displaying correctly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related