如何在编辑项目时禁用模型绑定

how to disable model binding when editing item

本文关键字：模型 绑定 项目 编辑      更新时间：2023-09-26

我有这样一部分视图：

<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) {
        });
    }
  };

我不明白：当我在模态中编辑时，为什么在表中，作为背景，我看到我的表正在改变？为什么，没有绑定（我认为是这样）

这是因为当您运行editContact函数时，您会使$scope.person指向与userToCopy相同的对象，在本例中为$scope.user，因此当您更改$scope.person时，$scope.user也会更改。

使用$scope.initialUser而不是$scope.person，这样$scope.internalUser是原始用户的副本，而不是同一个指针，因此对此对象的更改不会反映在另一个对象上

<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) {
        });
    }
  };
相关文章：