Wie erstellt man Json-Objekt für HTML-Formular mit AngularJS?

Ich lerne AngularJS jetzt Tage. Wie kann ich ein Json-Objekt für mein gegebenes html Formular erstellen. Ich kann es mit jQuery tun, aber ich muss dies in AngularJS tun, lassen Sie mich bitte wissen, dass wie kann ich tun this in angularJS und Dank im Voraus.Wie erstellt man Json-Objekt für HTML-Formular mit AngularJS?

Quelle

2016-04-05 Dhana

Wie ist das spezifisch für Angular? Verwenden Sie jQuery in Ihrem Projekt? Siehe hierzu: http://StackOverflow.com/Questions/11661187/Form-Serialize-Javascript-No-Framework – Roope

@Roope, ich muss Json-Objekt mit AngularJS statt mit jQuery erstellen, gibt es eine Möglichkeit, nur mit AngularJS zu erstellen ? – Dhana

@Dhana JQuery Lite ist mit AngularJS integriert. Das macht es mit jQuery, wenn es im angularen Universum nicht schadet. –

Besser ohne Serialisierung können Sie dies mit ng-Modell tun.

var app = angular.module('demoApp', []); 
 

 
app.controller('demoController', function($scope) { 
 
    $scope.formData = {} 
 
    $scope.serialize = function($event){ 
 
    console.log($scope.formData) 
 
    alert(JSON.stringify($scope.formData)) 
 
    $event.preventDefault() 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="demoApp"> 
 

 
<head> 
 

 
    <script src="https://code.angularjs.org/1.4.9/angular.js" ></script> 
 
</head> 
 

 
<body ng-controller="demoController"> 
 
    <h2>Form</h2> 
 
    <form action="" method="post" id="formid" name="testForm"> 
 
    First Name: 
 
    <input type="text" ng-model="formData.Fname" maxlength="50" size="12" /> 
 
    <br/> Last Name: 
 
    <input type="text" ng-model="formData.Lname" maxlength="50" size="12" /> 
 
    <br/> Select a Level of Education: 
 
    <br/> 
 
    <select ng-model="formData.education"> 
 
     <option value="Jr.High">Jr.High</option> 
 
     <option value="HighSchool">HighSchool</option> 
 
     <option value="College">College</option> 
 
    </select> 
 
    <br/> 
 
    <p> 
 
     <input type="submit" ng-click="serialize($event)" /> 
 
    </p> 
 
    </form> 
 
</body> 
 

 
</html>

Quelle

2016-04-05 11:46:45

ich nicht die Notwendigkeit sehen, Formulardaten serialisiert werden wir ein Objekt in der Steuerung und fügen Modell als Eigenschaften in ihm festlegen. Hier ist die Codepen.

Ausblick:

<form name="contactForm" class="col-md-6" ng-app="app" ng-controller="bodyCtrl"> 
    <div class="form-group"> 
    <label for="exampleInputEmail1">Firstname</label> 
     <input type="text" class="form-control" ng-model="simpleForm.first_name"> 
    </div> 
    <div class="form-group"> 
     <label for="exampleInputPassword1">Lastname</label> 
     <input type="text" class="form-control" ng- model="simpleForm.last_name"> 
    </div> 
    <div class="form-group"> 
    <select class="form-control" name="" id="" ng-options="option.value as option.label for option in educationOptions" ng- model="simpleForm.education"> 
    </select> 
    </div> 
<button type="submit" class="btn btn-default" ng-click="toggleShow()">Submit</button> 
    <pre ng-hide="!show"> 
     <code> 
    {{simpleForm|json}} 
    </code> 
    </pre>

Controller:

var app = angular.module('app', []); 

app.controller('bodyCtrl', function($scope) { 
$scope.show = false; 
$scope.simpleForm = {}; 
$scope.educationOptions = [{ 
'label': 'Jr.High', 
'value': 'Jr.High' 
}, { 
'label': 'HighSchool', 
'value': 'HighSchool' 
}, { 
'label': 'College', 
'value': 'College' 
}] 
$scope.simpleForm.education = $scope.educationOptions[0].value; 
$scope.toggleShow = function() { 
    $scope.show = !$scope.show 
    } 
})

Sie könnten to this link for more on data binding .Und diese one beziehen möchten, wenn Sie von jQuery Hintergrund kommen.

Quelle

2016-04-05 12:16:27 Rishab777

Wie erstellt man Json-Objekt für HTML-Formular mit AngularJS?

Antwort

Verwandte Themen