Question

我有一个输入和一个按钮。我希望在输入为空或超过15个字符时禁用该按钮。

HTML

<input type="text" id="addCustomer" ng-model="customerNumber">
<button id="addSingleCustomerButton" ng-disabled="!isValidSingleInput(customerNumber)" ng-click="addCustomer()"></button>

isValidSingleInput

$scope.isValidSingleInput = function(input) {
    return (input != undefined && input.length > 0 && input.length <= 15);
}

addCustomer

$scope.addCustomer = function() {
    $('#addSingleCustomerButton').button('loading');

    // Call service to add customer number to database
    CustomerService.add({}, payload, function(data) {
        $('#addSingleCustomerButton').button('reset');
        $scope.customerNumber = '';
    });
}

在addCustomer函数的末尾，通过使用$scope.customerNumber = '';设置范围来清除输入字段。

但是，清除输入后，不会再次禁用该按钮。我将日志的结果添加到isValidInput函数中，清除输入后它返回false。因此，该函数被调用并返回期望值，但它对按钮的ng-disabled毫无影响。

编辑：：添加了功能addCustomer

EDIT2 ：没关系，但是问题是由Bootstrap的button.js引起的。如果我删除了.button('loading')和.button('reset')，则它可以正常工作。在我看来，无论如何我都应该这样做，因为我要在按钮后重新设置范围。

Answer 1

您可以检查一下为什么它可能对您不起作用吗？

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.isValidSingleInput = function(input) {
    return (input != undefined && input.length > 0 && input.length <= 15);
	}
    $scope.addCustomer = function(){
    	$scope.customerNumber = '';
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<input type="text" id="addCustomer" ng-model="customerNumber">
<button id="addSingleCustomerButton" ng-disabled="!isValidSingleInput(customerNumber)" ng-click="addCustomer()">BUTTON</button>

</div>

角度-更改范围后禁用ng的按钮不起作用

1 个答案: