javascript - ng-click 和传递参数的语法错误

Question

我正在将一个对象添加到一个对象数组中，并尝试使用它的 id 删除它

ng-repeat 遍历数组并为它找到的每个对象输出某些内容，其中之一是带有 ng-click="removeWeek({{ key }})"的按钮。在浏览器中，当我检查元素时，它会生成我想要的按钮，并使用正确的键，但控制台会给我这个错误，并阻止按钮执行任何操作。当我在 ng-repeat 的其他地方使用 {{ key }} 时，它按预期工作，没有错误

Error: [$parse:syntax] http://errors.angularjs.org/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.com/ajax/libs/angularjs/1.2.7/angular.min.js:6:449
    at Xa.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:155:346)
    at Xa.consume (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:156:325)
    at Xa.object (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:164:6)
    at Xa.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:154:482)
    at Xa.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:161:240)
    at Xa.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:160:480)
    at Xa.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:160:340)
    at Xa.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:160:204) <button type="button" ng-click="removeWeek({{key}})"> 

在 docs.angularjs.org 上查看错误向我展示了这一点

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>

应用程序.js

var myModule = angular.module("trainercompare", ['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);
            }
        });

    }; 


}

我也不确定如何在 removeWeek 方法中放入什么来让它做我想做的事，但首先，是什么导致了错误？

Answer 1

您不需要 {{ }} 围绕 key。

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