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

当我点击＆＃34;完成＆＃34;按钮我正在向服务器发送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

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

1 个答案: