javascript - Angular JS - Bootstrap 模式 ENTER 按键有两个按钮，只有一个可见

标签 javascript angularjs twitter-bootstrap

我有一个模式屏幕，可让用户创建新出版物并编辑现有出版物:

<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 键提交表单时，有时会触发错误的操作。事实上，它会触发模式中的上一个操作，即使按钮未显示。有什么更好的方法来实现这一目标？

最佳答案

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

为了解决这个问题，您可以使用 ng-if 来代替，它将从 DOM 中删除该元素或重新创建它。