时间戳

首页 > 解决方案 > Angularjs - 插入表单内的下拉列表：如何在提交表单之前将项目添加到下拉列表中？

angularjs - Angularjs - 插入表单内的下拉列表：如何在提交表单之前将项目添加到下拉列表中？

问题描述

  1. 我有一个模式文本输入页面，其中除其他字段外，还有一个“作者”下拉列表
  2. 有时会发生“作者”下拉列表中没有所需的作者项目
  3. 因此，用户必须关闭模态文本输入页面，进入模态“作者”输入页面以插入新作者，然后才返回模态文本输入页面提交表单。

在此处输入图像描述

在下面的一段代码中调用模态文本输入页面：

vm.popupAddTextForm = function () {        
    var modalInstance = $modal.open({
        templateUrl: '/add_text_modal/add_text_modal.view.html',
        controller: 'add_text_modalCtrl as vm',
        resolve : { modalDati : function () {   
            return {datatips : vm.datatips,
                datatipbyid :  vm.datatipbyid,
                datasubtips : vm.datasubtips,
                dataauts : vm.dataauts  }
            }
        }
    });

有没有办法通过单击“添加新作者”按钮直接从模式文本输入页面调用模式“作者”输入页面？插入新作者后如何更新相对下拉列表？

提前谢谢。

标签： angularjslistformssubmitdropdown

解决方案

谢谢 Maxim Shoustin 和 João Fé 我听从了你的建议，我明白了！我希望对分享过程的人有所帮助：

  1. 我在 html 中插入 btn 来调用 vm.popupAddAutForm()：

 <div class="col-sm-4"><a ng-click="vm.popupAddAutForm()" class="btn btn-default pull-right" style="width: 100px;">Nuovo Autore</a></div>

  1. 我在模态文本输入页面中放入了调用 vm.popupAddAutForm() 的代码：

//If Author is not present in the relative dropdown list 
        //I invoke modal author entry page 
        //(the modal text entry page is hidden and all data field remain in stand-by)
        vm.popupAddAutForm = function () {
            var modalInstance = $modal.open({
                templateUrl: '/add_aut_modal/add_aut_modal.view.html',
                controller: 'add_aut_modalCtrl as vm'
            }); 
            //after author insert I recall RestFul API to retrieve authors again and 
            //update the relative dropdown list 
            modalInstance.result.then(function(data) {
                //refresh only the author dropdown list;
                Data.AllAutori()
                    .then(function (response) { 
                    vm.dataauts = {auts: response.data};
                    //alert(JSON.stringify(vm.datasubtips.subtips));
                })
            }); 
        }

  1. 结果如下图： modal text entry page modal author entry page and hidden modal text entry page

推荐阅读