AngularJS: Add and Edit List Items Using Same Input

Question

I'm trying to edit list items in the same input field I use for adding items.

Have a look at

and

The first example works, but I have to assign the temporary object's .name property to the list object:

$scope.currentItem.name = $scope.newToDo.name;

The second, where I assign the whole object, doesn't work:

$scope.currentItem = $scope.newToDo;

So if I had more than just the "name" property, do I really have to assign all values?

Brocco · Accepted Answer · 2014-05-29 16:42:36Z

1

Instead of keeping track of the current by the object, keep track of the index in the array of that item.

$scope.saveTodo = function(todo) {
  if ($scope.editMode) {
    $scope.currentItem = $scope.newToDo;
    $scope.todos[$scope.currentItemIndex] = $scope.newToDo;
    $scope.editMode = false;
  } else {
    $scope.todos.push($scope.newToDo);
  }
  $scope.newToDo = "";
};

$scope.editTodo = function(todo) {
  $scope.editMode = true;
  $scope.newToDo = angular.copy(todo);
  $scope.currentItemIndex = $scope.todos.indexOf(todo);
};

I also moved the text of the button into the markup rather than the controller (personal preference)

<button ng-click="saveTodo(todo)">{{editMode ? 'Edit' : 'Add'}}</button>

See it working in this plnkr

answered May 29, 2014 at 16:42

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brocco Over a year ago

I also renamed the addTodo function to be saveTodo as it serves both purposes (add/edit)

Collectives™ on Stack Overflow

AngularJS: Add and Edit List Items Using Same Input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related