ng-model-опция откат изменения на всей форме

Question

есть быстрый вопрос.

У меня есть форма с целым рядом полей, которые могут быть обновлены из пользовательского интерфейса.

Я нашел директиву под названием «ng-model-option», которая, похоже, справляется с такими проблемами.

Мой вопрос: возможно ли откат изменений на всей форме без указания ng-model-options="{ updateOn: 'submit'}" на каждом поле ввода в моей форме?

Или эта директива относится к каждому полю и только передает те поля, которые были изменены?

Благодарим за помощь и объяснение заранее!

Answer 1

Вы можете иметь все ваши поля будут привязаны к одному объекту, то есть

$scope.model = { 
    foo: '', 
    bar: '', 
    etc: ''   
}; 

Таким образом, вы можете сохранить копию модели, и сбросить связанную модель в любой момент вы хотите.

Например, чтобы отменить все изменения после неудачного вызова службы:

$scope.submit = function() { 
    yourService.update(model).then(function(result) { 
     // handle the success. 
    }, function(err) { 
     $scope.model = $scope.originalModel; 
    }); 
} 

Или, может быть перегрузка страницы вариант для вас?

$window.location.reload(); 

Answer 2

я нашел решение, используя и картографирования все до директивы нг-модель-опции

<form name="EditUserForm" class="col-md-12 form-horizontal top-buffer"> 

        <div class="form-group"> 
         <div class="col-sm-4 text-right"> 
          <label>User Id:</label> 
         </div> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control info-textbox" ng-model="user.UserID" ng-disabled="true" /> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-4 text-right"> 
          <label>Department Name:</label> 
         </div> 
         <div class="col-sm-8"> 
          <!--<input type="text" class="form-control info-textbox" ng-model="user.Department.DepartmentName" ng-readonly="isReadOnlyMode" />--> 
          <select class="form-control info-textbox" ng-options="department.DepartmentName for department in departments" 
            ng-model="selectedDepartment" 
            ng-readonly="isReadOnlyMode" 
            ng-model-options="{updateOn: 'submit'}"></select> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-4 text-right"> 
          <label>First Name:</label> 
         </div> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control info-textbox" ng-model="user.FirstName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" /> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-4 text-right"> 
          <label>Last Name:</label> 
         </div> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control info-textbox" ng-model="user.LastName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" /> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-4 text-right"> 
          <label>Email:</label> 
         </div> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control info-textbox" ng-model="user.Email" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" /> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-4 text-right"> 
          <label>Phone:</label> 
         </div> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control info-textbox" ng-model="user.Phone" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" /> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-4 text-right"> 
          <label>Login:</label> 
         </div> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control info-textbox" ng-model="user.LoginName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" /> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-4 text-right"> 
          <label>Password:</label> 
         </div> 
         <div class="col-sm-8"> 
          <input type="password" class="form-control info-textbox" ng-model="user.Password" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" /> 
         </div> 
        </div> 

        <!--Buttons--> 
        <div class="form-group"> 
         <div class="col-sm-4 text-right"> 
          <button type="button" class="btn btn-primary info-button" name="btnEdit" ng-click="flipBetweenEditMode(isReadOnlyMode)" ng-show="isReadOnlyMode"> 
           <span>Edit</span> 
          </button> 
          <button type="button" class="btn btn-primary info-button" name="btnEdit" ng-click="flipBetweenEditMode(isReadOnlyMode)" ng-show="!isReadOnlyMode"> 
           <span>Cancel</span> 
          </button> 
         </div> 
         <div class="col-sm-4 text-left"> 
          <button type="submit" class="btn btn-primary info-button" name="btnSave" ng-click="saveChangesToUser(user, isReadOnlyMode)" ng-show="!isReadOnlyMode"> 
           <span>Save</span> 
          </button> 
         </div> 
         <div class="col-sm-4 text-left"> 
          <div back-button></div> 
         </div> 
        </div> 
       </form> 

, а затем контроллер

$scope.flipBetweenEditMode = function (isReadOnlyMode) { 
    if (!isReadOnlyMode) { 
     $scope.EditUserForm.$rollbackViewValue(); 
    } 
    console.log(isReadOnlyMode); 
    $scope.isReadOnlyMode = !isReadOnlyMode; 
}; 

на отмените это откатить все изменения и восстановить модель на первом этапе.