2012-10-09 23 views
20

Tôi có một danh sách các mục và khi nhấp vào một trong các mục, hộp thoại phương thức sẽ được hiển thị để người dùng thực hiện một số thay đổi và nhấp vào "Đóng" hoặc "Lưu thay đổi".AngularJS: Phương thức ràng buộc dữ liệu - lưu thay đổi chỉ khi "Lưu" được nhấp hoặc quên thay đổi nếu "Hủy" được nhấp

Vấn đề là nói rằng người dùng thực hiện một số thay đổi và nhấp vào "Đóng", các thay đổi sẽ được phản ánh trong mô hình mà khung nhìn bị ràng buộc, vì ràng buộc dữ liệu là ngay lập tức.

Câu hỏi của tôi là, làm cách nào để trì hoãn cập nhật và chỉ thực hiện ràng buộc khi "Lưu thay đổi" được nhấp hoặc bằng cách nào đó quên thay đổi nếu nhấp "Hủy".

Mã cho hộp thoại modal của tôi là như vậy:

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

Cảm ơn, Shaun

Trả lời

11

Việc sử dụng doc angularjs để có một ví dụ chỉ tình trạng này. Những gì bạn cần là sao chép mô hình của bạn (xem angular.copy), trước khi hiển thị phương thức chỉnh sửa của bạn và khi người dùng nhấp vào closeModal(), bạn sẽ gán lại mô hình của mình cho giá trị nhân bản. IMHO, tôi sẽ đổi tên nút 'Đóng' thành 'Hủy' và đặt nó ở bên phải 'Lưu Thay đổi', điều này rõ ràng hơn và dường như là cách mà nhiều trang web hoạt động.

Hope this helps

--dan

Các vấn đề liên quan