формы POST данные angularjs на сервер

Question

У меня есть форма:

<form ng-submit="submitForm()" name="theForm"> 
    <input type="number" name="age" ng-model="age" /> 
    <input type="submit" value="Submit" /> 
</form> 

который я тогда представить с:

$scope.submitForm = function() { 
    $http.post('/someplace', $scope.theForm); 
} 

Проблема заключается в том, что я хочу, посланной, чтобы данные были

{ "age", 42 } 

, но вместо этого это

{ 
    "$error": {}, 
    "$name": "theForm", 
    "$dirty": true, 
    "$pristine": false, 
    "$valid": true, 
    "$invalid": false, 
    "$submitted": true, 
    "age": { 
     "$viewValue": "42", 
     "$modelValue": "42", 
     "$validators": {}, 
     "$asyncValidators": {}, 
     "$parsers": [ 
      null, 
      null 
     ], 
     "$formatters": [ 
      null 
     ], 
     "$viewChangeListeners": [], 
     "$untouched": false, 
     "$touched": true, 
     "$pristine": false, 
     "$dirty": true, 
     "$valid": true, 
     "$invalid": false, 
     "$error": {}, 
     "$name": "age", 
     "$options": null 
    } 
} 

Есть ли простой встроенный способ в угловом для получения желаемого результата?

Answer 1

Я думаю, что вы пытаетесь сделать что-то, как вы были использованы, чтобы сделать в течение многих лет;) (правильно если я ошибаюсь). Общая практика заключается в том, чтобы иметь модель, которую вы позже отправляете.

<form ng-submit="submitForm()" name="theForm"> 
    <input type="text" name="name" ng-model="userForm.name" required/> 
    <input type="number" name="age" ng-model="userForm.age" required/> 
    <input type="text" name="sex" ng-model="userForm.sex" required/> 
    <input type="submit" value="Save" ng-disabled="theForm.$invalid" /> 
    <p ng-if="theForm.$dirty">Remember to save changes</p> 
</form> 

, а затем

$scope.submitForm = function() { 
    $http.post('/someplace', {user: $scope.userForm}); 
} 

plnr с проверкой http://plnkr.co/edit/WHSna0pWRfIegmwyxRt2?p=preview

Answer 2

Не публикуйте форму, разместите только нужные данные.

$scope.submitForm = function() { 
    $http.post('/someplace', { "age", $scope.age }); 
} 

При отправке формы с наименованием в сообщении все формы, связанные с угловыми данными собраны.

Edit:

Если вы все еще хотите разместить данные из формы, а не от объема, вы можете сделать это

$scope.submitForm = function() { 
     $http.post('/someplace', { "age", $scope.theForm.age.$modelValue }); 
    } 

$scope.theForm.age.$modelValue разместим модели значение входного имени возраста внутри theForm, выглядит приятно читать, а также полезно, если вы даже не определяете модель по возрасту, , но серьезно $scope.age будет только лучше

Answer 3

Я придумал небольшую работу. Это перебирает данные формы Выделяя без угловых свойств, а затем присваивающей $modelValue к этому ключу:

$scope.submitForm = function() { 
    var form = {}; 
    for (var propName in $scope.theForm) { 
     if (propName.charAt(0) != '$') { 
      form[propName] = $scope.theForm[propName].$modelValue; 
     } 
    } 

    $http.post('/someplace', form); 
} 

Answer 4

JQuery на помощь, так как угловые 1.3, кажется, не имеет обобщенный способ получить элемент формы варов без перечисления var имена явно.

$scope.submitPost = function(){ 
     var postVars = {}; 
     $('form[name="myForm"]').find('input, select, textarea').each(function(i, el){ 
      var varName = $(el).attr('name'); 
      postVars[varName] = $scope[varName]; 
     }); 
     $http.post('/some-route', {postVars : postVars}); 
    }; 

Lodash (или Подчеркивание) на помощь.

$scope.submitPost = function(){ 
    var postVars = _.pick($scope, ['objKey1','objKey2','objKey3']); 
    $http.post('/some-route', {postVars : postVars}); 
};