javascript - syntax error with ng-click and passing arguments - Stack Overflow

admin管理员组

文章数量:1414908

I am adding an object to an array of objects and I am trying to delete it using its id

ng-repeat iterates over the array and outputs certain things for each object it finds, one of them being a button with ng-click="removeWeek({{ key }})". in the browser when I inspect the element this produces the button I want with the correct key in place but the console gives me this error and prevents the button from doing anything. when I use {{ key }} elsewhere in the ng-repeat it works as expected with no errors

Error: [$parse:syntax] .2.7/$parse/syntax?p0=key&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=14&p3=removeWeek(%7B%7Bkey%7D%7D)&p4=key%7D%7D)
    at Error (<anonymous>)
    at .2.7/angular.min.js:6:449
    at Xa.throwError (.2.7/angular.min.js:155:346)
    at Xa.consume (.2.7/angular.min.js:156:325)
    at Xa.object (.2.7/angular.min.js:164:6)
    at Xa.primary (.2.7/angular.min.js:154:482)
    at Xa.unary (.2.7/angular.min.js:161:240)
    at Xa.multiplicative (.2.7/angular.min.js:160:480)
    at Xa.additive (.2.7/angular.min.js:160:340)
    at Xa.relational (.2.7/angular.min.js:160:204) <button type="button" ng-click="removeWeek({{key}})"> 

viewing the error at docs.angularjs shows me this

Syntax Error: Token 'key' is at column {2} of the expression [{3}] starting at [{4}].

html

<div ng-repeat="(key, week) in program.weeks">

            <input type="text" placeholder="Name the week" ng-model="week.name">
            <input type="text" placeholder="Describe It" ng-model="week.desc">
            {{ week.name }}</br>
            {{ week.desc }}</br>
            {{ key }}
            <button type ="button" ng-click="removeWeek({{key}})"> Remove week</button>
        </div>

app.js

var myModule = angular.module("trainerpare", ['ui.bootstrap']);

function programsController($scope, $http) {

    var numweeks = 1;
    $scope.program = { 

    };

    $scope.addWeek = function() {

        if (isDefined($scope.program.weeks)) {
            $scope.program.weeks.push(
                {
                    days:[]
                }
            );

        } else {
            $scope.program = { 
                weeks: [
                    {
                        days:[]
                    }
                ]
            };
        }
    };

    $scope.removeWeek = function(id) {
        $scope.progmram.weeks[id].remove();
    };

    function isDefined(x) {

    return x !== undefined;
    }

    $scope.addProgram = function() {

        console.log($scope.program);

        $http.post('/programs', $scope.program).success(function(data, status) {
            if(isDefined(data.errors)) {
                console.log(data.errors);
                }
            if(isDefined(data.success)) {
                console.log(data.success);
            }
        });

    }; 


}

I also am not sure how what to put in the removeWeek method to hav eit do what I want it to but first things first, whats causing the error?

I am adding an object to an array of objects and I am trying to delete it using its id

ng-repeat iterates over the array and outputs certain things for each object it finds, one of them being a button with ng-click="removeWeek({{ key }})". in the browser when I inspect the element this produces the button I want with the correct key in place but the console gives me this error and prevents the button from doing anything. when I use {{ key }} elsewhere in the ng-repeat it works as expected with no errors

Error: [$parse:syntax] http://errors.angularjs/1.2.7/$parse/syntax?p0=key&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=14&p3=removeWeek(%7B%7Bkey%7D%7D)&p4=key%7D%7D)
    at Error (<anonymous>)
    at https://ajax.googleapis./ajax/libs/angularjs/1.2.7/angular.min.js:6:449
    at Xa.throwError (https://ajax.googleapis./ajax/libs/angularjs/1.2.7/angular.min.js:155:346)
    at Xa.consume (https://ajax.googleapis./ajax/libs/angularjs/1.2.7/angular.min.js:156:325)
    at Xa.object (https://ajax.googleapis./ajax/libs/angularjs/1.2.7/angular.min.js:164:6)
    at Xa.primary (https://ajax.googleapis./ajax/libs/angularjs/1.2.7/angular.min.js:154:482)
    at Xa.unary (https://ajax.googleapis./ajax/libs/angularjs/1.2.7/angular.min.js:161:240)
    at Xa.multiplicative (https://ajax.googleapis./ajax/libs/angularjs/1.2.7/angular.min.js:160:480)
    at Xa.additive (https://ajax.googleapis./ajax/libs/angularjs/1.2.7/angular.min.js:160:340)
    at Xa.relational (https://ajax.googleapis./ajax/libs/angularjs/1.2.7/angular.min.js:160:204) <button type="button" ng-click="removeWeek({{key}})"> 

viewing the error at docs.angularjs shows me this

Syntax Error: Token 'key' is at column {2} of the expression [{3}] starting at [{4}].

html

<div ng-repeat="(key, week) in program.weeks">

            <input type="text" placeholder="Name the week" ng-model="week.name">
            <input type="text" placeholder="Describe It" ng-model="week.desc">
            {{ week.name }}</br>
            {{ week.desc }}</br>
            {{ key }}
            <button type ="button" ng-click="removeWeek({{key}})"> Remove week</button>
        </div>

app.js

var myModule = angular.module("trainerpare", ['ui.bootstrap']);

function programsController($scope, $http) {

    var numweeks = 1;
    $scope.program = { 

    };

    $scope.addWeek = function() {

        if (isDefined($scope.program.weeks)) {
            $scope.program.weeks.push(
                {
                    days:[]
                }
            );

        } else {
            $scope.program = { 
                weeks: [
                    {
                        days:[]
                    }
                ]
            };
        }
    };

    $scope.removeWeek = function(id) {
        $scope.progmram.weeks[id].remove();
    };

    function isDefined(x) {

    return x !== undefined;
    }

    $scope.addProgram = function() {

        console.log($scope.program);

        $http.post('/programs', $scope.program).success(function(data, status) {
            if(isDefined(data.errors)) {
                console.log(data.errors);
                }
            if(isDefined(data.success)) {
                console.log(data.success);
            }
        });

    }; 


}

I also am not sure how what to put in the removeWeek method to hav eit do what I want it to but first things first, whats causing the error?

• javascript
• angularjs

Share Improve this question Follow asked Jan 9, 2014 at 23:34 MarkMark 3,21766 gold badges4040 silver badges7878 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You dont need the {{ }} around key.

<button type ="button" ng-click="removeWeek(key)"> Remove week</button>

If you're trying to target the index of your object in the array then you should do

<button type ="button" ng-click="removeWeek($index)"> Remove week</button>

which means you could then do

<div ng-repeat="week in program.weeks">

    <input type="text" placeholder="Name the week" ng-model="week.name">
    <input type="text" placeholder="Describe It" ng-model="week.desc">
        {{ week.name }}</br>
        {{ week.desc }}</br>
        {{ key }}
    <button type ="button" ng-click="removeWeek($index)"> Remove week</button>
</div>

本文标签： javascriptsyntax error with ngclick and passing argumentsStack Overflow