How To Prepopulate A Dialog In Angularjs/bootstrap

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 all

Solution 1:

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

Solution 2:

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

<divid="dlg"class="modal hide fade"><divclass="modal body"><inputid="title"type="text"ng-model="selectedItem.text"><buttontype="button">ok</button></div><div>