javascript - Node/AngularJS - TypeError: Cannot read property '_id' of undefined. -

javascript - Node/AngularJS - TypeError: Cannot read property '_id' of undefined. -

i new mean , trying create simple crud application. getting error of undefined on _id , not understand why. variable works withevery other function phone call in. can help. getting error on line 117 in controller.js file

here controller.js code application

todoapp.controller('todoctrl', function($rootscope, $scope, todosfactory) { $scope.todos = []; $scope.iseditable = []; // todos on load todosfactory.gettodos().then(function(data) { $scope.todos = data.data; }); // save todo server $scope.save = function($event) { if ($event.which == 13 && $scope.todoinput) { todosfactory.savetodo({ "todo": $scope.todoinput, "iscompleted": false }).then(function(data) { $scope.todos.push(data.data); }); $scope.todoinput = ''; } }; //update status of todo $scope.updatestatus = function($event, _id, i) { var cbk = $event.target.checked; var _t = $scope.todos[i]; todosfactory.updatetodo({ _id: _id, iscompleted: cbk, todo: _t.todo }).then(function(data) { if (data.data.updatedexisting) { _t.iscompleted = cbk; } else { alert('oops went wrong!'); } }); }; // update edited todo $scope.edit = function($event, i) { if ($event.which == 13 && $event.target.value.trim()) { var _t = $scope.todos[i]; todosfactory.updatetodo({ _id: _t._id, todo: $event.target.value.trim(), iscompleted: _t.iscompleted }).then(function(data) { if (data.data.updatedexisting) { _t.todo = $event.target.value.trim(); $scope.iseditable[i] = false; } else { alert('oops went wrong!'); } }); } }; // delete todo $scope.delete = function(i) { todosfactory.deletetodo($scope.todos[i]._id).then(function(data) { if (data.data) { $scope.todos.splice(i, 1); } }); }; }); todoapp.controller('todoctrl', function($rootscope, $scope, todosfactory) { $scope.todos = []; $scope.iseditable = []; // todos on load todosfactory.gettodos().then(function(data) { $scope.todos = data.data; }); // save todo server $scope.save = function($event) { if ($event.which == 13 && $scope.todoinput) { todosfactory.savetodo({ "todo": $scope.todoinput, "iscompleted": false }).then(function(data) { $scope.todos.push(data.data); }); $scope.todoinput = ''; } }; //update status of todo $scope.updatestatus = function($event, _id, i) { var cbk = $event.target.checked; var _t = $scope.todos[i]; todosfactory.updatetodo({ _id: _id, iscompleted: cbk, todo: _t.todo }).then(function(data) { if (data.data.updatedexisting) { _t.iscompleted = cbk; } else { alert('oops went wrong!'); } }); }; // update edited todo $scope.edit = function($event, i) { if ($event.which == 13 && $event.target.value.trim()) { var _t = $scope.todos[i]; todosfactory.updatetodo({ _id: _t._id, todo: $event.target.value.trim(), iscompleted: _t.iscompleted }).then(function(data) { if (data.data.updatedexisting) { _t.todo = $event.target.value.trim(); $scope.iseditable[i] = false; } else { alert('oops went wrong!'); } }); } }; // delete todo $scope.delete = function(i) { todosfactory.deletetodo($scope.todos[i]._id).then(function(data) { if (data.data) { $scope.todos.splice(i, 1); } }); }; });

just case error in either factory.js code or html, include both. here factory.js code:

todoapp.factory('todosfactory', function($http){ var urlbase = '/api/todos'; var _todoservice = {}; _todoservice.gettodos = function(){ homecoming $http.get(urlbase); }; _todoservice.savetodo = function(todo){ homecoming $http.post(urlbase, todo); }; _todoservice.updatetodo = function(todo) { homecoming $http.put(urlbase, todo); }; _todoservice.deletetodo = function(id){ homecoming $http.delete(urlbase + '/' + id); }; homecoming _todoservice; });

here html partial uses controller , factory:

<div class="container" ng-controller="todoctrl"> <div class="row col-md-12"> <div> <input type="text" class="form-control input-lg" placeholder="enter todo" ng-keypress="save($event)" ng-model="todoinput"> </div> </div> <div class="row col-md-12 todos"> <div class="alert alert-info text-center" ng-hide="todos.length > 0"> <h3>nothing yet!</h3> </div> <div ng-repeat="todo in todos" class=" col-md-12 col-sm-12 col-xs-12" ng-class="todo.iscompleted ? 'strike' : ''"> <div class="col-md-1 col-sm-1 col-xs-1"> <input type="checkbox" ng-checked="todo.iscompleted" ng-click="updatestatus($event, todo._id, $index)"> </div> <div class="col-md-8 col-sm-8 col-xs-8"> <span ng-show="!iseditable[$index]">{{todo.todo}}</span> <input ng-show="iseditable[$index]" type="text" value="{{todo.todo}}" ng-keypress="edit($event)"> <input ng-show="iseditable[$index]" type="button" class="btn btn-warning" value="cancel" ng-click="iseditable[$index] = false" /> </div> <div class="col-md-3 col-sm-3 col-xs-3" > <input type="button" class="btn btn-info" ng-disabled="todo.iscompleted" class="pull-right" value="edit" ng-click="iseditable[$index] = true" /> <input type="button" class="btn btn-danger" class="pull-right" value="delete" ng- click="delete($index)" /> </div> </div> </div>

this line must cause of issue:

<input ng-show="iseditable[$index]" type="text" value="{{todo.todo}}" ng-keypress="edit($event)">

you forgot pass $index sec parameter of edit function. should prepare it:

<input ng-show="iseditable[$index]" type="text" value="{{todo.todo}}" ng-keypress="edit($event, $index)">

javascript html5 angularjs angularjs-scope mean