angularjs - 如何禁用模型編輯項目

Question

當結合我有鑑於這樣的部分：

<tbody> 
    <tr data-ng-repeat="user in users | orderBy:predicate:reverse" data-id="{{user.Id}}" class="table-row"> 
    <td> 
     <div class="contacts-cell"> 
     {{user.FirstName}} 
     </div> 
    </td> 
    <td> 
     <a href="javascript:void(0)" data-ng-click="editContact(user)" data-toggle="modal" data-target="#new-person"></a> 
    </td> 
    </tr> 
</tbody> 

和模式，其中我編輯我的數據：

<div class="modal custom" id="new-person" tabindex="-1" role="dialog" aria-hidden="true" modal-center data-backdrop="static"> 
    <div class="modal-dialog"> 
    <div class="modal-content">  
     <form class="form-horizontal first-modal" role="form" name="contactForm" novalidate> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" data-ng-click="onCancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     </div> 
     <div class="modal-body"> 
      <div class="column-left">    
      <div class="form-group" data-ng-class="{ 'has-error': submittedContact && contactForm.firstName.$invalid }"> 
       <label class="control-label" for="name">Name</label> 
       <span class="input-nonedit" data-ng-show="isShowWindow">{{person.FirstName}}</span> 
       <input type="text" id="name" class="form-control on-input" data-ng-model="person.FirstName" name="firstName" placeholder="Enter Name" data-ng-hide="isShowWindow" maxlength="100" required/> 
      </div> 
      </div>   
      </div> 
      <div class="column-right">    
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn-edit pull-right" data-ng-click="updateContact()" data-target="#new-person">Edit</button> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

和控制器：

$scope.editContact = function(userToCopy) { 
     $scope.person = userToCopy; 
     $scope.initialUser = angular.copy(userToCopy); 
     }; 


$scope.updateContact = function() { 
    if ($scope.contactForm.$valid) { 
     $http.put(settings.apiBaseUri + '/myapp/contacts', $scope.person, { 
      headers: { 
      'Content-Type': 'application/json' 
      } 
     }) 
     .success(function(response) { 
     }).error(function(err, status) { 

     }); 
    } 
    }; 

我不明白：爲什麼在表中，當我編輯模式，作爲背景我看到我的表正在改變？爲什麼，沒有約束力（我認爲是這樣）

Answer 1

這是因爲當你運行editContact函數時，你將$ scope.person指向與userToCopy相同的對象，在這種情況下它是$ scope.user，所以當您更改$ scope.person時，$ scope.user也會更改。

使用$ scope.initialUser代替$ scope.person，這樣$ scope.initialUser是原始用戶的副本，而不是相同的指針，因此對象上的更改不會反映在另一個上。

<span class="input-nonedit" data-ng-show="isShowWindow">{{initialUser.FirstName}}</span> 

$scope.updateContact = function() { 
    if ($scope.contactForm.$valid) { 
     $http.put(settings.apiBaseUri + '/myapp/contacts', $scope.initialUser, { 
      headers: { 
      'Content-Type': 'application/json' 
      } 
     }) 
     .success(function(response) { 
     }).error(function(err, status) { 

     }); 
    } 
    };