4

この質問は、ブートストラップ 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({});
 }

しかし、ダイアログにコントローラーを使用してフォームとして設定する必要があるように思えます。フォームとして設定する方法はわかりますが、最初からデータをフォームに入れる方法はわかりません。

どんな助けでも大歓迎です。

4

2 に答える 2

4

Twitter のブートストラップにサードパーティのネイティブ 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

于 2013-02-24T18:40:23.150 に答える
0

選択した項目をスコープに設定できます

 $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-21T01:35:39.160 に答える