2013-04-08 3 views
26

Gibt es eine Möglichkeit, Funktion für angularjs zu serialisieren?Gibt es eine effektivere Möglichkeit, ein Formular mit angularjs zu serialisieren?

meine Post sieht gerade so aus.

$scope.signup_submit = function() { 
    var formData = { 
    username: $scope.username, 
    full_name: $scope.full_name, 
    email: $scope.email, 
    password: $scope.password, 
    confirm_password: $scope.confirm_password 
    } 

    $http({ 
    method: "POST", 
    url: '/signup', 
    data: formData, 
    }).success(function (data) { 
    if (data.status == 'success') { 
     alert('all okay'); 
    } else { 
     alert(data.msg) 
    } 
    }); 
} 
+1

Haben Sie versucht: $ element.serialize()? – StuR

+0

ja tat, es gibt undefined Funktion serialize –

+2

Ich denke, er meinte $ (Element) .serialize(); Sie müssen natürlich JQuery haben, um dies zu ermöglichen. – ganaraj

Antwort

62

So sollten Sie nicht mit AngularJS auf Formulardaten zugreifen. Die Daten in Ihrem Formular sollten innerhalb des Gültigkeitsbereichs gebunden sein.

Verwenden Sie also ein Objekt, z. $ scope.formData, die all Ihre Datenstruktur enthält, dann sollte jedes Ihrer Formularelemente mit ng-model daran gebunden werden.

z:

http://jsfiddle.net/rd13/AvGKj/13/

<form ng-controller="MyCtrl" ng-submit="submit()"> 
    <input type="text" name="name" ng-model="formData.name"> 
    <input type="text" name="address" ng-model="formData.address"> 
    <input type="submit" value="Submit Form"> 
</form> 

function MyCtrl($scope) { 
    $scope.formData = {}; 

    $scope.submit = function() { 
     console.log(this.formData); 
    }; 
} 

Wenn das obige Formular $ scope.formData vorgelegt wird, ein Objekt des Formulars enthält, die dann in Ihrer AJAX-Anforderung übergeben werden. z:

Object {name: "stu", address: "england"} 

Ihre Frage zu beantworten, gibt es keine bessere Methode „serialize“ ein Formulardaten mit AngularJS.

Sie könnten jedoch jQuery verwenden: $ element.serialize(), aber wenn Sie Angular richtig verwenden möchten, gehen Sie mit der obigen Methode.

+3

Dies funktioniert nicht sehr gut, wenn Sie mehrere Formulare auf einer Seite haben, z. als Teil einer ng-repeat-Direktive ... – Kevin

+2

@Kevin in ng-form nach dynamisch erzeugten Formularen suchen (zB als Teil einer ng-repeat-Direktive) http://scotch.io/tutorials/javascript/building -dynamic-angular-forms-with-ngrepeat-and-ngform –

+0

Ich dachte, es ging um die Serialisierung des Formulars. –

Verwandte Themen