ng-model-option回滾整體變化

Question

有一個簡單的問題。

我有一大堆可以從UI更新的字段的表單。

我發現了一個叫做「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

我發現了一個解決方案，通過使用和映射一切NG-模型選項指令

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

上取消這將回滾所有的變化，在第一階段恢復模型。