AngularJS：如何使用NG-重複

Question

改變按鈕文本的onclick渲染我有以下的HTML + AngularJS代碼：

<table class="table table-hover"> 
     <thead> 
     <tr> 
      <th width="80%">Task</th> 
      <th width="10%">Delete</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="task in task_list track by $index"> 
      <td>{{task.title}}</td> 
      <td> 
      <button ng-click="delete_task($index)" class="btn btn-success btn-xs">Completed</button> 
      </td> 
     </tr> 
     </tbody> 
    </table> 

這產生像下面的圖片在任務列表：

View image

當我點擊「完成」按鈕時，我發送一個http請求到服務器，並且該部分工作正常。我試圖實現的是，當我點擊按鈕時，按鈕文本應該變成「請稍等」。

如何在不使用jQuery的情況下使用AngularJS實現此目的。

Answer 1

你可以做這樣的事情。以下代碼將在提交到submitting時更改按鈕的狀態。一旦完成，它將更改爲completed並禁用該按鈕。

的Html

<tr ng-repeat="task in task_list track by $index"> 
    <td>{{task.title}}</td> 
    <td> 
    <button ng-disabled="task.disabled" ng-click="delete_task($index)" class="btn btn-success btn-xs">{{task.status ? task.status : 'complete'}}</button> 
    </td> 
</tr> 

的Javascript

$scope.delete_task = function(index) { 
    var task = $scope.task_list[index]; 

    task.status = 'submitting'; 

    $http.get('post.json').then(function(res) { 
     task.status = 'completed'; 
     task.disabled = true; 
    }); 
    }; 

這裏工作plunkr