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>

模态控制：

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

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

Crud服务：

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

我只看过$ rollbackViewValue（）的示例，其中包含一个输入字段和代码：$scope.myForm.inputName.$rollbackViewValue()但我有多个输入字段？

Answer 1

你应该通过表单名称调用$ rollbackViewValue（）：

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

在模板中调用它：

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

你会看到它是如何运作的：

      var formData = new FormData();
                var file = $("#fuLoadImage")[0].files[0];
                formData.append("Image", file);
                formData.append("ImageName", $("#fuLoadImage")[0].files[0].name);
                formData.append("Command", (isNaN(parseInt(id)) ? "I" : "U").toString());



            $.ajax({
                type: "POST",
                dataType: 'json',
                url: "/V_EMPLOYEE/InsertProfileImage",
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (ProfileID) {
                    if (ProfileID.ProfileID != -1 || ProfileID.ProfileID != null) {
                        params.PROFILEID = ProfileID.ProfileID;
                    }

                    $.post("/V_EMPLOYEE/CreateUserAll", params, function (success) {
                        if (success.success == false || success.success == null) {
                            alertify.alert("Error Inserting or Updating!");
                            return false;
                        } else {
                            // alertify.alert("Inserted/Updated Successfully!");
                            alertify.alert("Inserted/Updated Successfully!", function () {
                                window.location.href = "/V_EMPLOYEE/Index";
                            });
                            return false;
                        }
                    });

                },

                error: function (jqXHR, textStatus, errorThrown) {
                    alertify.alert(errorThrown.toString());
                }
            });

Answer 2

有点晚了，但是对于其他人的参考（我遇到了这个寻找$ rollbackViewValue的另一个问题）。

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

这使$ scope.editForm。$ rollbackViewValue（）在控制器中可用，并重置整个表单。

对于按钮位于表单内的情况，在输入字段上使用ng-submit和ng-model-options =“{updateOn：'submit'}”，然后添加'type = button'属性来取消按钮元素（所以提交未触发）是一种快速解决方案。

实施例： https://embed.plnkr.co/IQ4vvutC3tcHvVBH0821/

如何在AngularJS 1.3

2 个答案: