How to prepopulate a dialog in angularjs/bootstrap

Question

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>

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.

Any help would be appreciated.

Answer 1

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

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

Answer 2

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

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.

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