清除文本输入和禁用按钮onclick Angularjs

Question

嗨,我有一个案例,我在输入表单时禁用提交按钮,只在输入框有一些文本时启用它.

<div id="app-id-input-container" ng-form="appIdInput">
    <div class="input-group">
        <input id="app-id-input" name="appIdInput" ng-click="clearAppIdInput()" class="form-control" type="text" ng-model="appId" pattern="^[AaIi][PpXxNn][0-9]{6}$" maxlength="8" />
        <span class="input-group-btn">
            <button id="addAppId" class="btn btn-success" ng-click="preferences.appIdInput.$valid && addAppId()" type="button">&nbsp;<span class="glyphicon glyphicon-plus"></span></button>
        </span>
    </div>
    <span class="validation-alert" ng-show="appIdError">{{appIdError}}</span>
</div>

当用户在输入框内单击时,我清除该字段.

$scope.clearAppIdInput = function() {
    $scope.appId = "";
};

即使范围为空,也不会禁用该按钮.

这是我禁用按钮的方式.

$(document).ready(function(){
    $('#addAppId').prop('disabled',true);

    $('#app-id-input').keyup(function(){
        $('#addAppId').prop('disabled', this.value == "" ? true : false);
    });
});

现在,我可以通过单击键盘上的"退格键"再次禁用该按钮？

当我通过点击清除输入字段时,如何再次禁用该按钮？

Answer 1

按照Angular方式,我建议使用ngDisabled指令:

<button ng-disabled="!appId" id="addAppId" class="btn btn-success"
        ng-click="preferences.appIdInput.$valid && addAppId()" 
        type="button">&nbsp;<span class="glyphicon glyphicon-plus"></span>
</button>

虽然如果该按钮$scope.appId为空或未定义,该按钮将被禁用.不需要jQuery或任何特殊处理程序.