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

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

1 个答案: