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