ホームページ > 記事 > ウェブフロントエンド > AngularJS_AngularJS を使用してラジオ ボタンとチェックボックスを処理する簡単な方法
AngularJS のフォーム処理は非常に単純です。 AngularJS がフォーム検証に双方向データ バインディングを使用すると、基本的にフォーム処理に役立ちます。
チェックボックスの使用例はたくさんあり、それに対処する方法もたくさんあります。この記事では、チェックボックスとラジオ ボタンをデータ変数にバインドする方法と、それを使用して何ができるかを見ていきます。
Angular フォームの作成
この記事では、index.html と app.js の 2 つのファイルが必要です。 app.js はすべての Angular コードが保持される場所 (それほど大きくありません)、index.html はアクションが実行される場所です。まず、AngularJS ファイルを作成します。
// app.js var formApp = angular.module('formApp', []) .controller('formController', function($scope) { // we will store our form data in this object $scope.formData = {}; });
このファイルでは、Angular アプリケーションを作成するだけです。また、すべてのフォーム データを保持するコントローラーとオブジェクトも作成しました。
index.html ファイルを見てみましょう。このファイルではフォームを作成し、データ バインディングを実行します。 Bootstrap を使用してページをすばやくレイアウトしました。
<-- 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 }}