AngularJS:禁用提交和服务器响应之间的所有表单控件 [英] AngularJS: disabling all form controls between submit and server response

问题描述

如果我想在用户点击某种保存"或提交"按钮和通过网络传输的数据.我不想使用 JQuery(这是邪恶的！！！)并将所有元素作为数组查询(按类或属性标记)到目前为止，我的想法是:

• 使用 cm-form-control 自定义指令标记所有元素，该指令将订阅 2 个通知:数据发送"和数据处理".然后自定义代码负责推送第二个通知或解决承诺.
• 使用 promiseTracker(不幸的是！)强制生成像 ng-show="loadingTracker.active()" 这样极其愚蠢的代码.显然，并非所有元素都具有 ng-disabled，而且我不想使用 ng-hide/show 来避免跳舞"按钮.
• 咬紧牙关，仍然使用 JQuery

有没有人有更好的主意?提前致谢！

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

HTML:

<ng-form ng-controller="myCtrl">保存:{{isSaving}}<fieldset ng-disabled="isSaving"><input type="text" ng-model="btnVal"/><input type="button" ng-model="btnVal" value="{{btnVal}}"/><button ng-click="save()">拯救我也许</button></fieldset></ng-form>

和JS:

var angModule = angular.module("myApp", []);angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {$scope.isSaving = 未定义；$scope.btnVal = '是';$scope.save = function(){$scope.isSaving = true;$超时(函数(){$scope.isSaving = false;警报('完成')；}, 10000);};});

解决方案

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

... 输入 ...

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

然后在控制器中将 $scope.isSaving 在 http 调用之前设置为 true，在 http 调用之后设置为 false.

I have a dilemma about what is the best (and correct) approach if I want to disable form controls (or at least make them unavailable for user interaction) during a period of time when user clicks sort of "Save" or "Submit" button and data travelling over the wire. I don't want to use JQuery (which is evil!!!) and query all elements as array (by class or attribute marker) The ideas I had so far are:

• Mark all elements with cm-form-control custom directive which will subscribe for 2 notifications: "data-sent" and "data-processed". Then custom code is responsible for pushing second notification or resolve a promise.
• Use promiseTracker that (unfortunatelly!) enforces to produce extremely stupid code like ng-show="loadingTracker.active()". Obviously not all elements have ng-disabled and I don't want to user ng-hide/show to avoid "dancing" buttons.
• Bite a bullet and still use JQuery

Does any one have a better idea? Thanks in advance!

UPDATED: The fieldset idea DOES work. Here is a simple fiddle for those who still want to do the same 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>

and 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);
    };
});

解决方案

Wrap all your fields in fieldset and use ngDisabled directive like this:

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

It will automatically disable all inputs inside the fieldset.

Then in controller set $scope.isSaving to true before http call and to false after.

这篇关于AngularJS:禁用提交和服务器响应之间的所有表单控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！