如何prepopulate在angularjs对话框/引导 [英] How to prepopulate a dialog in angularjs/bootstrap

问题描述

这个问题是使用引导CSS和JavaScript问候angluarjs。

This question is in regards to angluarjs using bootstrap css and javascript.

我有我想要显示和设置，以便在它们上面点击打开一个对话框，让你改变的值项的列表。事情是这样的：

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>

问题是我怎么实现showDlg功能忍受#dlg与从项目领域ppopulated一个弹出对话框$ P $（把item.text到输入框在这个简单例子。）
我可以，实际上做的，通过直接设置值本事：

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:

 $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.

任何帮助将是AP preciated。

Any help would be appreciated.

推荐答案

如果你愿意使用第三方，对Twitter的引导本地AngularJS指示我今天回答一个非常类似的问题：<一href=\"http://stackoverflow.com/a/15051565/1418796\">http://stackoverflow.com/a/15051565/1418796

If you are willing to use a 3rd party, native AngularJS directives for Twitter's bootstrap I was answering a very similar question today: http://stackoverflow.com/a/15051565/1418796

由于我们对本地AngularJS指令工作角度的用户界面，不需要在Twitter上的JavaScript依赖的一部分：的 http://angular-ui.github.com/bootstrap/ 。它的优点是，你有更少的依赖，包括和指令被很好地融入AngularJS的生态系统。

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.

使用 $对话自提库，你可以从列表编辑项目，像这样的服务：的 http://plnkr.co/edit/PG0iHG?p=$p$pview

Using the $dialog service from the mentioned repository you could edit items from a list like so: http://plnkr.co/edit/PG0iHG?p=preview

这篇关于如何prepopulate在angularjs对话框/引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！