表单中缺少$scope元素

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-model用于

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

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

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

如果必须在视图中添加这些元素，请在视图中使用单向绑定

<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 人员如何考虑隐藏元素上的数据绑定的更多信息。

Answer 2

不要使用 value

属性，请尝试使用 ng-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
};