twitter-bootstrap 如何在 angularjs/bootstrap 中预填充对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15054741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prepopulate a dialog in angularjs/bootstrap
提问by Fraser Orr
This question is in regards to angluarjs using bootstrap css and javascript.
这个问题是关于使用 bootstrap css 和 javascript 的angluarjs。
I have a list of items that I want to display and set up so that clicking on them opens a dialog to allow you to change the values. Something like this:
我有一个我想要显示和设置的项目列表，以便单击它们会打开一个对话框以允许您更改值。像这样的东西：
<!-- The repeater !-->
<ul>
<li ng-repeat="item in items" ng-click="showDlg(item)">
{{item.text}}
</li>
</ul>
<!-- The dialog !-->
<div id="dlg" class="modal hide fade">
<div class="modal body">
<input id="title" type="text">
<button type="button">ok</button>
</div>
<div>
The question is how do I implement the showDlg function to put up #dlg as a pop up dialog prepopulated with the fields from item (in this trivial case putting item.text into the input box.) I can, and in fact do, hack it by setting the values directly:
问题是我如何实现 showDlg 函数来将 #dlg 设置为一个弹出对话框，其中预先填充了 item 中的字段（在这个简单的案例中，将 item.text 放入输入框中。）我可以，而且实际上是这样做的它通过直接设置值：
$scope.showDialog = function(item) {
$("#dlg #title").val(item.text);
$(#dlg).modal({});
}
But it seems to me that I should be using a controller for the dialog and setting it up as a form. I can see how to set it up as a form, but not how to get the data into the form to start with.
但在我看来，我应该为对话框使用控制器并将其设置为表单。我可以看到如何将其设置为表单，但看不到如何将数据放入表单中。
Any help would be appreciated.
任何帮助，将不胜感激。
采纳答案by pkozlowski.opensource
If you are willing to use a 3rd party, native AngularJS directives for Twitter's bootstrap I was answering a very similar question today: https://stackoverflow.com/a/15051565/1418796
如果您愿意为 Twitter 的引导程序使用 3rd 方、本机 AngularJS 指令，我今天正在回答一个非常相似的问题：https: //stackoverflow.com/a/15051565/1418796
As part of the angular-ui we are working on native AngularJS directives that don't require dependency on twitter's JavaScript: http://angular-ui.github.com/bootstrap/. The advantage is that you've got less dependencies to include and directives that are well integrated into the AngularJS ecosystem.
作为 angular-ui 的一部分，我们正在研究不需要依赖 twitter 的 JavaScript 的原生 AngularJS 指令：http: //angular-ui.github.com/bootstrap/。优点是您需要包含的依赖项更少，并且可以很好地集成到 AngularJS 生态系统中的指令。
Using the $dialogservice from the mentioned repository you could edit items from a list like so: http://plnkr.co/edit/PG0iHG?p=preview
使用$dialog上述存储库中的服务，您可以像这样编辑列表中的项目：http: //plnkr.co/edit/PG0iHG?p=preview
回答by César Alforde
You can set the selected item in the scope
您可以在范围内设置所选项目
$scope.showDialog = function(item) {
$scope.selectedItem = item;
$("#dlg").modal({});
}
and update the dialog html like any other html fragment
并像任何其他 html 片段一样更新对话框 html
<div id="dlg" class="modal hide fade">
<div class="modal body">
<input id="title" type="text" ng-model="selectedItem.text">
<button type="button">ok</button>
</div>
<div>
