AngularJS'PUT'请求。如何仅提交表格中的数据?

时间:2014-07-21 23:06:32

标签: javascript angularjs

我试图更新用户数据,但是当我制作“PUT'请求,Angular发送整个用户$ scope而不仅仅是表单公开的字段。

我使用工厂来获取和存储数据。这是我的编辑功能

$scope.editStudent = function () {
    Student.edit ({id: $stateParams.studentId}, $scope.Student, function (data) {
        $location.path('/');
});
};

这对我不起作用,因为我发送的服务器自己进行了服务器端验证,如果我发送整个学生范围,那么会有一些空白的字段,因此不会通过验证。

服务器允许我只发送我需要更新的字段,所以我正在寻找一种Angular方式来做这件事。

这是一个屏幕截图,可以帮助解释我的问题:

1 个答案:

答案 0 :(得分:0)

您可以编写函数来检查表单中定义的字段,然后只提交值。我认为代码是自我解释的。

代码段

app.controller('MainCtrl', function($scope, $http) {
    $scope.user = {
        "name": "Ali",
        "company": "MSB",
        getData: function(form) {
            var data = {};
            angular.forEach(this, function(fieldValue, fieldName) {
                if (!angular.isFunction(fieldValue) && form.$isSubmit(fieldName)) {
                    data[fieldName] = fieldValue;
                }
            });
            return data;
        }
    }

    $scope.save = function() {
        $scope.userForm.$isSubmit = function(fieldName) {
            return !angular.isUndefined((this[fieldName]));
        }
        console.log($scope.user.getData($scope.userForm));
        $scope.data = $scope.user.getData($scope.userForm);
        //$http.put('url', $scope.data)
    }
});

我创建了plunkr - http://plnkr.co/edit/6g5myBvBmWZ2IvKMLuvL?p=preview

*提示(或规则)

  1. 输入名称必须与型号名称相同
  2. 根据需要更改getData函数来处理要返回的数据。