如何更新 AngularJS 中的列表？

Question

我在AngularJS中创建了一个TODO List，但是我没有完成更新功能。我有点困难。

如何创建更新函数？

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代码：

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);
    }
})

Answer 1

如果要更新值，则必须将任务在任务数组中的位置作为参数传递（$index 是位置）：

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

然后更新函数将是：

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

这是你需要的吗？

Answer 2

更新按钮。仅在更新时可见。

<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>

新增更新功能。

$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;
}

如果您在任务上单击更新，它将显示大更新按钮并将旧的待办事项添加到输入中。点击大更新按钮后，todo 任务将更新。

Plunker

如何更新 AngularJS 中的列表？

How update list in AngularJS?

javascript

crud

list

angularjs