一尘不染

AngularJS:禁用提交和服务器响应之间的所有表单控件

angularjs

如果我想在用户单击“保存”或“提交”按钮之类的一段时间内禁用表单控件(或至少使它们无法与用户交互),则对最好(正确)的方法有什么困惑?和数据通过网络传输。我不想使用JQuery(这是邪恶的!!)并将所有元素查询为数组(通过类或属性标记),到目前为止,我的想法是:

  • 使用cm-form-control定制指令标记所有元素,这些指令将订阅2个通知:“数据已发送”和“数据已处理”。然后,自定义代码负责推送第二个通知或解决承诺。
  • 使用promiseTracker(不幸地!)强制执行会产生极其愚蠢的代码,例如ng-show="loadingTracker.active()"。显然,并非所有元素都具有,ng-disabled并且我不想让用户ng-hide/show避免使用“跳舞”按钮。
  • 硬着头皮仍然使用JQuery

有谁有更好的主意吗?提前致谢!

更新: 字段集的想法确实可行。对于那些仍然想做同样的事情的人来说,这是一个简单的提琴。http:
//jsfiddle.net/YoMan78/pnQFQ/13/

HTML:

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
        Saving: {{isSaving}}
        <fieldset ng-disabled="isSaving">
            <input type="text" ng-model="btnVal"/>
            <input type="button" ng-model="btnVal" value="{{btnVal}}"/>
            <button ng-click="save()">Save Me Maybe</button>
        </fieldset>
    </ng-form>
</div>

和JS:

var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
        $scope.isSaving = true;
        $timeout( function()
             {
                 $scope.isSaving = false;
                 alert( 'done');
             }, 10000);
    };
});

阅读 219

收藏
2020-07-04

共1个答案

一尘不染

将所有字段包装在 fieldset中, 并使用 ngDisabled 指令,如下所示:

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

它将自动禁用字段集中的所有输入。

然后在控制器中将其设置$scope.isSavingtruehttp调用之前和false之后。

2020-07-04