如何在AngularJS 1.3中使用ngModelOptions和$ rollbackViewValue（）

Question

我在模式視圖中的輸入字段有問題。 當我在輸入字段中進行更改時，它將更新表列表，但是當我離開頁面並返回表列表回到此頁面時，更改消失了。

這是我的模態視圖：

<form class="form-horizontal" name="editForm" novalidate>
<div class="modal-body">
<div class="form-group-sm has-feedback">
  <label class="control-label">Firstname</label>
  <input type="text" 
         class="form-control" 
         name="Fname"
         ng-model="selected.fname" 
         ng-model-options="{updateOn: 'updateItem'}"
         ng-required="true"
         />
</div>
</div>
//the same input field for lastname
...
<div class="modal-footer">
  <button class="btn btn-default" ng-click="createItem(selected)" type="submit">Erstellen</button>
  <button class="btn btn-default" ng-click="updateItem(selected)"> Ändern</button>
  <button class="btn btn-default" ng-click="cancel()">Abbrechen</button>
</div>
</form>

模態Ctrl：

$scope.cancel = function () {
  $scope.editForm.$rollbackViewValue();
  $modalInstance.dismiss('cancel');
}

$scope.updateItem = function (updateItem) {
  CrudService.update(updateItem);
  $scope.ok();
}

原始服務：

...
update: function (updateItem) {
   updateItem.$update();
},
...

我僅看到帶有一個輸入字段和代碼的$ rollbackViewValue（）示例： $scope.myForm.inputName.$rollbackViewValue()但我有多個輸入字段？

Answer 1

您應該通過表單名稱調用$ rollbackViewValue（）：

 editForm.$rollbackViewValue()

在您的模板中調用它：

{{editForm.$rollbackViewValue.toString()}} 

您將看到它實際上是如何工作的：

function () { 
     forEach(controls, function(control) { 
        control.$rollbackViewValue(); 
     }); 
}

Answer 2

有點晚了，但供其他參考（我遇到了這個問題，正在尋找$ rollbackViewValue的另一個問題）。

在控制器中使用$ rollbackViewValue：要使用$ scope從控制器中引用表單，您必須在表單的子元素上使用ng-form屬性（例如，示例中的form-group div）。

這使得$ scope.editForm。$ rollbackViewValue（）在控制器中可用，並重置整個表單。

對於按鈕在表單內的情況，請在輸入字段上使用ng-submit和ng-model-options =“ {updateOn：'submit'}”，然后添加'type = button'屬性以取消按鈕元素（因此，提交為' t觸發）是一種快速的解決方案。

示例： https ： //embed.plnkr.co/IQ4vvutC3tcHvVBH0821/