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

【问题标题】：How to prepopulate a dialog in angularjs/bootstrap如何在 angularjs/bootstrap 中预填充对话框
【发布时间】：2013-02-09 20:59:47
【问题描述】：

这个问题是关于使用引导 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({});
 }

但在我看来，我应该为对话框使用控制器并将其设置为表单。我可以看到如何将其设置为表单，但看不到如何将数据放入表单中。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript forms twitter-bootstrap angularjs

【解决方案1】：

如果您愿意为 Twitter 的引导程序使用第 3 方、原生 AngularJS 指令，我今天回答了一个非常相似的问题：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

【讨论】：

plnkr 中的示例很棒 - 但是如果您使用的是 v0.3.0，您的解析属性将需要是一个返回 angular.copy(itemToEdit) 的函数。或者至少这就是我在逐步浏览 Angular 源代码后让它工作的方式。

【解决方案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>

【讨论】：