首页 > 解决方案 > 模态 - 当下拉列表中的值更改时弹出显示。AngularJs

问题描述

这是我的项目中的下拉代码:

<div class="form-group col-xs-6">
    <label for="status">{{ 'SERVICE_STATUS' | translate }}</label>
    <select class="form-control" name="status" ng-model="ctrl.service.status" ng-options="status_id as status_name for (status_id, status_name) in ctrl.statusChoices" ng-model="showModal"></select> 
</div>

当此下拉列表的值发生更改(通过用户的选择)时,它会显示一个弹出窗口以验证更改(类似于“您确定要执行此操作吗?”并单击“确定”)。

这是模态弹出的代码:

<div class="modal-dialog {{size ? 'modal-' + size : ''}}" ng-show="showModal">
<div class="modal-content" uib-modal-transclude>
<div class="modal-header" ng-controller="ContentHeaderController as chctrl">
    <div class="pages-header">
        <h3>{{ 'SERVICE_STATUS' | translate}}</h3>
    </div>
</div>
<div class="modal-body">
    <p>{{ 'SERVICE_STATUS_CHANGE' | translate }}</p>
</div>
<div class="modal-footer">
    <div class="flex-end">
        <button type="button" class="page-button"
                ng-click="chctrl.close()">
            <i class="fa fa-check" aria-hidden="true"></i><span>{{ 'SERVICE_STATUS_CONFIRM' | translate }}</span>
        </button>
    </div>
</div>
</div>
</div>

注意:这两个 html 代码在同一个 html 文件中。

我尝试使用 ng-model 和 ng-show 指令来执行此操作,但它似乎不起作用,因为当我在下拉列表中选择一个值时它没有做任何事情。关于如何实现这个或我可以使用什么的任何想法?

标签: javascriptangularjsmodal-dialogpopup

解决方案


推荐阅读