Question

在我的模态弹出代码中，如果文本框为空或没有输入任何内容，我会尝试禁用按钮。

<div id="add_account_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ModalForAddAccount" aria-hidden="true">
    <div class="modal-body">
        <h3>Add a new Account</h3>
        <form class=" " name="addAccountForm">
            <div class="control-group">
                <div class="controls">
                    <label class="control-label" style="display: inline">
                        Account Name
                        <span class="controls" style="display: inline;color:red;">*</span>
                    </label>

                    <div class="controls" style="display: inline">
                        <input type="text" class="input-large" ng-model="vm.addedAccount" style="margin-top: 5px;margin-left:7px;">
                    </div>
                </div>
            </div>
            <div class="control-group">
                <div class="btn-group">
                    <button class="btn btn-primary " ng-class="{'disabled':vm.addedAccount === ''}" ng-click="vm.submitAddAccount()">Submit</button>
                    <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

但是模态弹出加载的提交按钮没有被禁用。

我也尝试过：

<button class="btn btn-primary " ng-disabled="vm.addedAccount === ''" ng-click="vm.submitAddAccount()">Submit</button>

但这也行不通。

我做错了什么？

Answer 1

即使ng-disabled为true，

ng-click也会触发使用ng-submit代替ng-disabled。

<form class=" " name="addAccountForm" ng-submit="vm.submitAddAccount()">
        <div class="control-group">
            <div class="controls">
                <label class="control-label" style="display: inline">
                    Account Name
                    <span class="controls" style="display: inline;color:red;">*</span>
                </label>

                <div class="controls" style="display: inline">
                    <input type="text" class="input-large" ng-model="vm.addedAccount" style="margin-top: 5px;margin-left:7px;">
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="btn-group">
                <button type="submit" class="btn btn-primary " ng-disabled="vm.addedAccount === ''">Submit</button>
                <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </form>

Answer 2

你可以这样使用：

<button class="btn btn-primary " ng-disabled="!vm.addedAccount.length" ng-click="vm.submitAddAccount()">Submit</button>

Answer 3

ng-disabled效果很好：http://codepen.io/DaniloPolani/pen/wgOpPa

也许vm.addedAccount不是空字符串？尝试使用控制台日志打印vm.addedaccount === ''或在尖括号内。

ng-disabled无法按预期工作

3 个答案: