带按钮的AngularJS ng-repeat列表：单击后禁用按钮

发布时间：2020-12-17 06:48:05 所属栏目：安全来源：网络整理

导读：我在AngularJS中有一个包含多个条目的列表,每个条目都有一个按钮.单击按钮时,应用程序将执行一些操作,然后成功完成后,应禁用该按钮. 我模板中有趣的部分如下所示： li ng-repeat="item in items" span{{item}}/span button ng-click="doSomeStuff(item)"Requ

我在AngularJS中有一个包含多个条目的列表,每个条目都有一个按钮.单击按钮时,应用程序将执行一些操作,然后成功完成后,应禁用该按钮.

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

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

我已经尝试使用ng-if指令,但当然每个按钮都会消失.

以前,我考虑过使用原始Javascript或jQuery的解决方案,因为只需通过其id修改按钮就很容易了.但AngularJS是否提供了解决方案？

解决方法

使用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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!