Question

我有这个表单（在页面加载Angular填充数据后显示）：

<div ng-controller="ItemsController">
<form name="Items" class="form-horizontal ng-dirty ng-valid-parse ng-valid ng-valid-required ng-submitted" ng-submit="submit()" _lpchecked="1">
    <input ng-model="item._token" name="_token" type="hidden" value="gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe" class="ng-pristine ng-untouched ng-valid">
    <input ng-model="item.no_label" name="no_label" type="hidden" value="1" class="ng-pristine ng-untouched ng-valid">
    <fieldset>
        <legend>Add New Item</legend>

        <div class="form-group">
            <label class="col-md-2 control-label" for="sku">SKU</label>

            <div class="col-md-3">
                <input id="sku" name="sku" ng-model="item.sku" type="text" placeholder="Enter SKU" class="form-control input-md ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" required="">

            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label" for="Name">Name</label>

            <div class="col-md-5">
                <input id="name" name="name" ng-model="item.name" type="text" placeholder="Optional name" class="form-control input-md ng-valid ng-dirty ng-valid-parse ng-touched">

            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label" for="add"></label>

            <div class="col-md-4">
                <button id="add" name="add" class="btn btn-success">
                    <i class="fa fa-plus"></i> Add
                </button>
                <button id="cancel" name="cancel" class="btn btn-danger">Cancel</button>
            </div>
        </div>

    </fieldset>
</form>
</div>

这个控制器：

myApp.controller('ItemsController', ['$scope', '$http', function ($scope, $http) {
    $scope.item = {};
    $scope.submit = function () {
        if ($scope.validate()) {
            $http.post('/items/store', $scope.item)
                    .success(function (data) {
                        toastr['success']('Added ' + $scope.item.sku + ' to list.', 'Success!');
                        $scope.Items.$setPristine();
                        oTable.ajax.reload();
                    }).error(function (data) {
                        if ('error' in data)
                            toastr['error']('ERROR: ' + data['error'], 'Error!');
                        else
                            toastr['error'](JSON.stringify(data), 'Error!');
                    });
        }
    };
    $scope.validate = function () {
        return $.trim($scope.item.sku) != '';
    };
}]);

每次提交此表单时，$scope.item中的数据都会丢失item._token和item.no_label。

为什么以及如何更正？

Answer 1

尝试使用ng-value：

，而不是使用value属性

<input ng-model="item._token" name="_token" type="hidden" ng-value="gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe" class="ng-pristine ng-untouched ng-valid">
<input ng-model="item.no_label" name="no_label" type="hidden" ng-value="1" class="ng-pristine ng-untouched ng-valid">

另一种选择是更新这样的项目：

$scope.item = {
  _token: 'gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe',
  no_label: 1
};

Answer 2

ng-model用于双向数据绑定。由于您使用的hidden input elements无法被用户修改或向用户显示，因此没有理由使用ng-model。双向绑定越少，Perf就越好。

因此，解决此问题的最佳方法是在控制器中向_token添加no_label和$scope.item值。

$scope.item = {
  _token: 'gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe',
  no_label: 1
};

如果必须在View中添加这些元素，请在View

中使用单向绑定

<input name="_token" type="hidden" value="{{:: item._token}}" class="ng-pristine ng-untouched ng-valid">
<input name="no_label" type="hidden" value="{{:: item.no_label}}" class="ng-pristine ng-untouched ng-valid">

检查此pr以了解更多关于Angular家伙如何考虑隐藏元素的数据绑定的信息。

表单中缺少$ scope中的元素

2 个答案: