如何在angularjs/bootstrap中预填充对话框

Question

这个问题是关于使用bootstrap css和javascript的angluarjs的。

我有一个要显示和设置的项目列表，这样单击它们就会打开一个对话框，允许您更改值。类似这样的东西：

<!-- 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>

问题是我如何实现showDlg函数，将#dlg显示为一个弹出对话框，其中预先填充了item中的字段(在这种琐碎的情况下，将item.text放入输入框中(我可以，事实上，通过直接设置值来破解它：

 $scope.showDialog = function(item) {
     $("#dlg #title").val(item.text);
     $(#dlg).modal({});
 }

但在我看来，我应该为对话框使用一个控制器，并将其设置为窗体。我可以看到如何将它设置为窗体，但不能看到如何将数据输入窗体。

如有任何帮助，我们将不胜感激。

Answer 1

如果您愿意使用第三方原生AngularJS指令进行Twitter的引导，我今天回答了一个非常类似的问题：https://stackoverflow.com/a/15051565/1418796

作为angular ui的一部分，我们正在开发不需要依赖twitter JavaScript的原生AngularJS指令：http://angular-ui.github.com/bootstrap/.其优点是，您可以减少要包含的依赖项，并将指令很好地集成到AngularJS生态系统中。

使用上述存储库中的$dialog服务，您可以编辑列表中的项目，如下所示：http://plnkr.co/edit/PG0iHG?p=preview

Answer 2

您可以在范围中设置所选项目

 $scope.showDialog = function(item) {
     $scope.selectedItem = item;
     $("#dlg").modal({});
 }

并像任何其他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>