javascript - AngularJS:如何更改使用 ng-repeat 渲染的按钮文本 onclick

Question

我有以下 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