即使在 angularjs 中禁用按钮，模态弹出窗口也会打开

Posted 2023-05-08

【中文标题】即使在 angularjs 中禁用按钮，模态弹出窗口也会打开

【英文标题】：Modal popup is opening even when button is disabled in angularjs

【发布时间】：2016-12-02 07:17:47

【问题描述】：

我有一个 Bootstrap 模态弹出窗体，它在 AngularJS 中按按钮单击打开，我想知道即使按钮是 disabled 它仍然显示。

请看下面的按钮代码：

<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
   Submit
</a>

我有以下模型弹出代码：

<div id="modal-form-submit" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="blue bigger"> DEMO MODEL FORM </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 col-xs-12">
                            <div class="form-group">
                                <label class="control-label" for="toitems">To:</label>
                                <div class="tags full-width">
                                    <span class="tag" ng-repeat="tag in tags"> tag.Description </span>
                                </div>
                            </div>
                        </div>
                    </div>                        
                </div>
                <hr />
                <div class="modal-footer">
                    <button class="btn btn-sm" data-dismiss="modal">
                        <i class="ace-icon fa fa-times"></i>
                        Cancel
                    </button>
                    <button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
                            ng-click="SaveEntireFormData()" type="button">
                        <i class="ace-icon fa fa-check"></i>
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>

我不想使用 jquery js，我真的想使用 angular js 解决这个问题。

【参考方案1】：

只需将禁用添加到您的锚标记类

<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">

【讨论】：

所以在 AngularJS 中它会像：<a class="btn btn-sm btn-info" ng-class="'disabled':(!ItemName || !ItemDescription)" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">

不客气..也感谢您在 Angular js 中提供的上述代码..会注意到相同的...

【参考方案2】：

disabled 属性不适用于 anchor 标记。它们是为button、fieldset 等标签构建的。

考虑添加这个 CSS 来解决这个问题：

a[disabled] 
    pointer-events: none;

【参考方案3】：

我做到了，而且效果很好。

<a class="btn btn-sm btn-info" ng-class="'disabled':(!ItemName || !ItemDescription)" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">

【参考方案4】：

试试这个

ng-disabled="(!ItemName) || (ItemDescription) "

如果可能，请告诉 ItemName 和 ItemDescription 是什么。

请记住，在 angularjs 中，如果您想禁用任何字段，您必须这样做

ng-disabled = 'true' ;