Question

有一个简单的问题。

我有一个包含大量字段的表单，可以从UI更新。

我找到了一个名为＆＃34; ng-model-option＆＃34;这似乎是处理这些问题。

我的问题是：是否可以在不指定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-model-option指令

找到了解决方案

<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-model-option回滚更改

2 个答案: