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

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

作为angular-ui的一部分，我们正在处理原生的AngularJS指令，这些指令不需要依赖于twitter的JavaScript：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>

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

2 个答案: