使用AngularJS发布表单数据

Question

I'm trying to use AngularJS to POST a form to an API I'm developing.

The form has novalidate , name="addMatchForm" , and ng-submit="submit(addMatchForm)" . The addMatchForm is as followed:

app.controller('addMatchController', ['$scope', 'players', 'matches', function($scope, players, matches) {

    ...

    $scope.submit = function(form) {
        form.submitted = true;

        // Make sure we don't submit the form if it's invalid
        if ( form.$invalid ) return;

        matches.add(form).success(function(data) {
            console.log('post result:', data);
        })
    }
}]);

app.factory('matches', function($http) {
    return {
        add: function(data) {
            return $http.post('/matches', data);
        }
    }
});

But the weird thing is that each and every input's value becomes an empty object at that point. This is the Form Data from Chrome Developer Tools:

{"a_score":{},"b_score":{},"day":{},"month":{},"year":{},"a_player1":{},"a_player2":{},"b_player1":{},"b_player2":{},"submitted":true}:

I did add the content-type part already.

$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

Any ideas?

Answer 1

Try to use $http like this:

return $http({
    method: 'POST',
    url: '/matches',
    data: $.param(data),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});