提交时禁用按钮，出错时重新启用

AngularJS Disable button on submit - re enable on error

本文关键字：新启用 启用 出错 按钮 提交      更新时间：2023-09-26

我在动态禁用按钮时遇到问题。

我的API休眠2秒来模拟一个超级慢的连接，我希望看到提交按钮在提交时被禁用，重新启用自己。

HTML -手动禁用按钮工作…

<button data-ng-disabled="false" data-ng-click="submit()">Schedule Appointment</button>

HTML -这不起作用

<button data-ng-disabled="{{ isSaving }}" data-ng-click="submit()">Schedule Appointment</button>

控制器:

app.controller('ScheduleController', function ($scope, $http, $window, $timeout)
{
    $scope.formData = {};
    $scope.isSaving = false;
    $scope.submit = function() {
        $scope.isSaving = true;
        console.log('Schedule Appointment Pressed, isSaving', $scope.isSaving);
        $http.post('/api/v1/schedule/', $scope.formData)
        .success(function(data) {
             // Do Stuff
        })
        .error(function(data){
            $scope.isSaving = false;
            console.log('Error, isSaving', $scope.isSaving);
            $scope.errors = data.errors;
        });
    }   
});

一切正常，console.log正确输出isSaving。问题是，按钮实际上不会被禁用，除非我硬编码ng-disabled="true"到html.

问题在于你的HTML。在访问ng指令中的作用域变量时不需要{{}}。

<button ng-disabled="isSaving" ng-click="submit()">Schedule Appointment</button>

希望能有所帮助。

相关文章：