Die Formularverarbeitung von AngularJS ist recht einfach. Wenn AngularJS die bidirektionale Datenbindung zur Formularvalidierung verwendet, hilft uns das im Wesentlichen bei der Formularverarbeitung.
Es gibt viele Beispiele für die Verwendung von Kontrollkästchen und es gibt viele Möglichkeiten, wie wir damit umgehen können. In diesem Artikel werfen wir einen Blick auf die Bindung von Kontrollkästchen und Optionsfeldern an Datenvariablen und was wir damit machen können.
Winkelform erstellen
In diesem Artikel benötigen wir zwei Dateien: index.html und app.js. In app.js befindet sich der gesamte Angular-Code (er ist nicht groß) und in index.html werden die Aktionen ausgeführt. Zuerst erstellen wir die AngularJS-Datei.
// app.js
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
});
In dieser Datei erstellen wir lediglich die Angular-Anwendung. Wir haben außerdem einen Controller und ein Objekt erstellt, um alle Formulardaten zu speichern.
Werfen wir einen Blick auf die Datei index.html. In dieser Datei erstellen wir das Formular und führen dann die Datenbindung durch. Wir haben Bootstrap verwendet, um die Seite schnell zu gestalten.
<-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<h2>Angular Checkboxes and Radio Buttons</h2>
<form>
<!-- NAME INPUT -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name">
</div>
<!-- =============================================== -->
<!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE -->
<!-- =============================================== -->
<!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
</form>
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>Sample Form Object</h2>
<pre class="brush:php;toolbar:false">
{{ formData }}