如何在angularjs/bootstrap中預先填充對話框

這個問題是關於使用引導CSS和JavaScript的angluarjs。如何在angularjs/bootstrap中預先填充對話框

我有一個項目列表，我想要顯示和設置，以便點擊它們打開一個對話框，讓您更改值。事情是這樣的：

<!-- 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.text到輸入框）我就可以了，其實這樣做，通過直接設置值本事：

$scope.showDialog = function(item) { 
    $("#dlg #title").val(item.text); 
    $(#dlg).modal({}); 
}

但在我看來，我應該使用對話控制器和設置它作爲一種形式。我可以看到如何將它設置爲表單，但不知道如何將數據放入表單中。

任何幫助，將不勝感激。

來源

2013-02-24 Fraser Orr

如果你願意使用一個第三方，對Twitter的引導本地AngularJS指示我今天回答一個非常類似的問題：https://stackoverflow.com/a/15051565/1418796

由於我們對本地AngularJS指令工作角UI的一部分，唐不要求依賴於Twitter的JavaScript：http://angular-ui.github.com/bootstrap/。好處是你的包含的依賴性較少，並且很好地集成到AngularJS生態系統中。

自提倉庫使用$dialog服務，你可以從列表編輯項目，像這樣：http://plnkr.co/edit/PG0iHG?p=preview

來源

2013-02-24 18:40:23

plnkr中的例子很好 - 但是如果你使用v0.3.0，你的resolve屬性將需要一個函數離子返回angular.copy（itemToEdit）。或者至少這是我在通過Angular源代碼後得到它的工作方式。 – Godders 2013-06-25 10:49:52

您可以在範圍

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

來源

2013-08-21 01:35:39

如何在angularjs/bootstrap中預先填充對話框

回答

相關問題