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?
Share Improve this question asked Jan 9, 2014 at 23:34 MarkMark 3,2176 gold badges40 silver badges78 bronze badges2 Answers
Reset to default 4You 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>