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>

app.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方法放入hav eit做我想要的东西，但首先要做的事情是什么，导致错误？

Answer 1

您不需要{{ }}周围的key。

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

Answer 2

如果你试图在数组中定位对象的索引，那么你应该

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

这意味着你可以做

<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>

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

2 个答案: