2016-06-15 2 views
2

AngularJSでTODOリストを1つ作成しましたが、更新機能が終了しませんでした。私にはいくつかの困難があります。AngularJSの更新リストはどのようになっていますか?

更新機能を作成するにはどうすればよいですか?

リンク: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.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); 
    } 
}) 

答えて

0

更新用ボタン。更新中のみ表示されます。

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

新しい更新機能。

タスクの更新をクリックすると、大きな更新ボタンが表示され、古いものを入力に持ち込みます。大きな更新ボタンを押すと、ToDoタスクが更新されます。

Plunker

+0

Greats!それは私が作成しようとした機能です。 –

2

あなたが値を更新したい場合は、タスクの配列($インデックス内のパラメータとしてタスクの位置を渡す必要がありますにされ位置:

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

そして、更新機能は次のようになります。

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

これは必要なものですか?

+0

私はここでテストされ、更新されませんでした。タスクは、テキストを変更するために入力に表示する必要があります。 –

+0

このソリューションは問題なく動作します。どのような振る舞いが必要ですか?更新ボタンをクリックして更新が必要なタスクを表示し、入力をinsodeしてから[保存]ボタンをクリックしますか? – gyc

+0

@DouglasGorniMelloあなたのパッカーでテストしましたが、新しいタスクの追加に使用されているのと同じ入力を使用してタスクの名前を更新したい場合は機能しました。 – miquelarranz

関連する問題