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

【问题标题】：Angularjs - dropdown list inside an inserting form: how to add an item to the dropdown list before submit the form?Angularjs - 插入表单内的下拉列表：如何在提交表单之前将项目添加到下拉列表中？
【发布时间】：2025-12-10 17:30:01
【问题描述】：

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

下面这段代码调用模态文本输入页面：

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  }
            }
        }
    });

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

提前致谢。

【问题讨论】：

你的想法很清楚，但不清楚你使用什么框架，如果它支持多个模型。我对Add new author" button的建议点击，隐藏所有模态内容并显示新内容添加作者
回答最后一个问题，您只需要将新作者添加到您在下拉列表中用作数据源的数组中。如果您更新模型，AngularJS 会自动更新视图。

标签： angularjs list forms submit dropdown

【解决方案1】：

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

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

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

我将调用 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));
                })
            }); 
        }

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

【讨论】：