I am encountering an issue while adding an object to an array of objects and attempting to delete it using its ID
When utilizing ng-repeat to iterate over the array and display certain elements for each object found, including a button with ng-click="removeWeek({{ key }})", I face a problem. Despite displaying the button correctly with the appropriate key when inspecting the element in the browser, the console throws an error preventing the button from functioning. Strangely, using {{ key }} elsewhere in the ng-repeat does not result in any errors.
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}})">
Reviewing the error message on docs.angularjs.org provides further clarification:
Syntax Error: Token 'key' is located at column {2} of the expression [{3}] starting at [{4}].
Below is the HTML code snippet:
<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>
The app.js file contains the following functions:
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);
}
});
};
}
Looking for guidance on resolving the error as well as how to properly implement the removeWeek method functionality.