21

アイテムのリストがあり、アイテムの1つをクリックすると、ユーザーが変更を加えて「閉じる」または「変更を保存」をクリックするためのモーダルダイアログが表示されます。

問題は、ユーザーがいくつかの変更を加えて「閉じる」をクリックすると、データバインディングが即座に行われるため、ビューがバインドされているモデルに変更が反映されることです。

私の質問は、更新を延期して「変更を保存」をクリックしたときにのみバインディングを実行する方法、または「キャンセル」をクリックした場合に変更を忘れる方法です。

私のモーダル ダイアログのコードは次のようになります。

<div ui-modal class="fade static" ng-model="modalShown" id="myModal" data-backdrop="static">
        <div class="modal-header">
            <button type="button" class="close" ng-click="closeModal()" aria-hidden="true">&times;</button>
            <h3>{{selectedClientFeature.feature.type}}</h3>
        </div>
        <div class="modal-body">    
            <ul class="unstyled columnlist">
                <li ng-repeat="country in countriesForEdit">
                    <input type="checkbox" ng-model="country.selected"> {{country.name}}
                </li>
            </ul>
        </div>
        <div class="modal-footer">
            <a ng-click="closeModal()" class="btn">Close</a>
            <a ng-click="saveChanges()" class="btn btn-primary">Save changes</a>
        </div>
    </div>

ありがとう、ショーン

4

2 に答える 2

12

angularjs doc には、まさにこの状況の例があります。必要なのは、編集モーダルを表示する前にモデルを複製することです ( angular.copyを参照)。ユーザーが closeModal() をクリックすると、複製された値にモデルを再割り当てします。IMHO、「閉じる」ボタンの名前を「キャンセル」に変更し、「変更を保存」の右側に配置します。これはより明確で、多くのサイトが機能する方法のようです。

お役に立てれば

――段

于 2012-10-09T05:39:03.307 に答える