模态-下拉菜单中的值更改时将显示弹出窗口。 AngularJs

时间:2018-09-19 19:04:19

标签: javascript angularjs modal-dialog popup

这是我的项目下拉菜单代码:

<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指令执行此操作,但似乎无法正常工作,因为当我在下拉列表中选择一个值时,它什么也没做。 关于如何实现这一点或我可以使用什么的任何想法?

0 个答案:

没有答案