AngularJS ng按钮重复列表:点击后禁用按钮

Question

我在AngularJS中有一个包含多个条目的列表，每个条目都有一个按钮。当点击按钮时，应用程序会做一些事情，成功后，该按钮应该被禁用。

我的模板中有趣的部分如下：

<li ng-repeat="item in items">
  <span>{{item}}</span>
  <button ng-click="doSomeStuff(item)">Request</button>
</li>

我已经试过使用ng-if指令了，但之后每个按钮都会消失。

以前，我想过用原始Javascript或jQuery来解决问题，因为只需根据id修改按钮很容易。但是AngularJS提供了解决方案吗？

Answer 1

按如下方式使用ng-disabled：

<li ng-repeat="item in items">
  <span>item</span>
  <button ng-click="doSomeStuff(item)" ng-disabled="item.disabled">Request</button>
</li>

控制器：

$scope.doSomeStuff = function(item) {
    //do operations and finally set disabled to true for that button
    item.disabled = true;
}