フォーム全体で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

は私がすべての変更をロールバックします、これを取り消しに使用して

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

NG-モデルオプションディレクティブにすべてをマッピングすることによって、解決策を見つけたとモデルを最初の段階で復元します。