Question

在我的Angular 1.x应用程序中，我通过对后端的api调用获取要约列表。

对于答复中返回的每个要约，我将创建一个ng-form。然后，我以模式显示表单，我希望能够在单击每个表单的提交按钮时将其禁用，以避免在将表单数据发布到后端时多次单击。

这似乎很棘手，因为要约的数量是未知的，因此我不确定如何为每个要约初始化变量以禁用按钮。

如果我只有一个表格，我会设置任务，那么任务将更加直接：

$scope.disableButton = true

...然后在按钮上使用ng-disabled

因此，我现在显示的表单如下：

<div ng-form ng-repeat="i in offers track by $index" name="messageForm[$index]" class="row ng-cloak">

     ....
     <button type="button" ng-click="offerRespond(messageForm[$index])" ng-disabled="!messageForm[$index].$valid || offer.i.disableButtons">Submit</button>

</div>

然后在我的控制器的offerRespond函数中：

offer = this;
offer.i.disableButtons = true;

这当然是行不通的，但是我已经尽我所能了。

一种破解方法是在将“商品”对象传递给前端之前对其进行解析，但这似乎是一种可怕的黑客行为。

Answer 1

实际上，我在实现中几乎得到了答案，我只是正确地引用了我的变量：

ng-disabled="!messageForm[$index].$valid || offer.i.disableButtons"

应该是

ng-disabled="!messageForm[$index].$valid || i.disableButtons"

感谢@igor给我一个测试的想法，使我能够自己揭示答案。

angularJs在提交时禁用表单按钮

1 个答案: