How update list in AngularJS?

Question

I created one TODO List in AngularJS but I didn't finish the update function. I have some difficulty.

How do I create the update function?

Link: https://plnkr.co/edit/XfWoGVrEBqSl6as0JatS?p=preview

<ul class="list-todo">
        <li ng-repeat="t in tasks track by $index">
            <div class="row">
                <div class="six columns">
                    <p>{{ t }}</p>
                </div>
                <div class="three columns">
                    <button class="button" ng-click="update()">update</button>
                </div>
                <div class="three columns">
                    <button class="button" ng-click="delete()">x</button>
                </div>
            </div>
        </li>
    </ul>

Angular Code:

angular.module('todoTest', [])
.controller('todoController', function($scope) {
    $scope.tasks = [];
    $scope.add = function() {
      $scope.tasks.push($scope.dotask);
    }
    $scope.update = function(){
        $apply.tasks.push($scope.dotask);
    }
    $scope.delete = function() {
      $scope.tasks.splice(this.$index, 1);
    }
})

miquelarranz · Accepted Answer · 2016-06-15 11:20:10Z

2

If you want to update the value you have to pass as parameter the position of the task inside the tasks array ($index is the position):

<button class="button" ng-click="update($index)">update</button>

And then the update function would be:

$scope.update = function(index){
    $scope.tasks[index] = $scope.dotask;
}

Is that what you needed?

answered Jun 15, 2016 at 11:20

miquelarranz

90411 silver badges27 bronze badges

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

3 Comments

Douglas Gorni Mello Over a year ago

I tested here and didn't update. The task should to appear in the input for alter the text.

gyc Over a year ago

This solution works fine. What behaviour do you need exactly? Do you want the update button to display the task that needs updating insode the input and then click on a 'save' button?

miquelarranz Over a year ago

@DouglasGorniMello I have tested it in your punker and it worked if you want to update the name of task using the same input that is being used for adding a new task.

Marko · Accepted Answer · 2016-06-15 12:01:07Z

Button for updating. Visible only while updating.

<div class="row">
        <button type="submit" class="u-full-width button button-primary">Criar Tarefa</button>
        <button ng-show="updateMode" ng-click="update()" type="button" class="u-full-width button button-primary">Update</button>
</div>

New update function.

$scope.update = function(index) {
  if ($scope.updateMode) {
    $scope.tasks[$scope.updateIndex] = $scope.dotask;
    $scope.updateMode = false;
  } else {
    $scope.dotask = $scope.tasks[index];
    $scope.updateMode = true;
    $scope.updateIndex = index;
}

If you click update on the task it will make the big update button visible and bring the old todo to the input. After hitting the big update button the todo task will update.

Plunker

Collectives™ on Stack Overflow

How update list in AngularJS?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related