Question

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

我的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输出正确保存。问题是该按钮实际上没有被禁用，除非我将ng-disabled =“true”硬编码到html中。

Answer 1

问题在于您的HTML。在ng指令中访问范围变量时，您不需要{{}}。

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

希望它有所帮助。

提交时AngularJS禁用按钮 - 错误时重新启用

1 个答案: