Question

我有这个模态屏幕，允许用户创建新的出版物并编辑现有出版物：

<div class="modal-content">
    <form role="form">
    <div class="modal-header ng-scope">
        <h3 class="modal-title">{{ items.ui.header }}</h3>
    </div>
    <div class="modal-body ng-scope">
        <div class="row">
            <div class="col-xs-12">
                <input type="hidden" name="publicationId" ng-model="items.publication.id" />
                <label for="publicationTitle">{{ items.ui.label }}</label>
                <input type="text" class="form-control" id="publicationTitle" name="publicationTitle" ng-model="items.publication.title"  />
            </div>

        </div>
    </div>
    <div class="modal-footer ng-scope">
        <button class="btn btn-primary" ng-click="new()" ng-show="items.ui.modalType=='new'" ng-enter="new();">{{ items.ui.action }}</button>
        <button class="btn btn-info" ng-click="edit()" ng-show="items.ui.modalType=='edit'"ng-enter="edit();">{{ items.ui.action }}</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        <button class="btn btn-danger pull-left" ng-click="delete()" ng-show="items.ui.modalType=='edit'"><span class="glyphicon glyphicon-trash"></span></button>
    </div>
    </form>
</div>

在任何给定时间，只显示两个按钮new()和edit()中的一个。但是，当我使用ENTER密钥提交表单时，它有时会触发错误的操作。实际上，即使按钮未显示，它也会触发模态中的上一个动作。有什么更好的方法来实现这个目标？

Answer 1

原因是ng-show和ng-hide将显示设置为none。意味着该元素仍然存在于DOM上。

为了解决这个问题，你可以使用ng-if来删除DOM中的元素或者重新创建它。

https://docs.angularjs.org/api/ng/directive/ngIf

Angular JS - bootstrap modal用两个按钮按ENTER键，只有一个可见

1 个答案: