AngularJS：データバインディングモーダル - 「保存」をクリックした場合のみ変更を保存します。「キャンセル」をクリックすると変更を忘れます

Question

アイテムのリストがあり、アイテムの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> 

おかげで、 ショーン

Answer 1

angularjsドキュメントの使用は、まさにこのような状況の例を持っています。必要なのは、編集モーダルを表示する前にモデルをクローンすることです（angular.copy参照）。ユーザーがcloseModal（）をクリックすると、モデルがクローン値に再割り当てされます。 IMHO、あなたの「閉じる」ボタンの名前を「キャンセル」に変更し、「変更を保存」の右側に置くと、これはより明示的で、多くのサイトが動作するようです。

ホープこれは私がlazy-modelディレクティブを思い付いたモデルを更新/手動クローン作成を自動化するには

Answer 2

--dan

に役立ちます。
https://stackoverflow.com/a/20643001/740245