ホームページ > ウェブフロントエンド > jsチュートリアル > AngularJS_AngularJS を使用してラジオ ボタンとチェックボックスを処理する簡単な方法

AngularJS_AngularJS を使用してラジオ ボタンとチェックボックスを処理する簡単な方法

WBOY
リリース: 2016-05-16 15:53:52
オリジナル
1190 人が閲覧しました

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 }}
  
ログイン後にコピー

作成が完了すると、名前を入力するフォームが表示されます。すべてが想像どおりに機能する場合、名前入力に何かを入力すると、以下の

 タグ セクションにそれが表示されるはずです。<br />
<br />
<strong>チェックボックス</strong></p>
<p>チェックボックスはフォームで非常に一般的です。次に、Angular が ngModel を使用してデータ バインディングを実装する方法を見ていきます。チェックボックスがたくさんある場合、データをオブジェクトにバインドするときにデータを処理する方法がわからなくなることがあります。 </p>
<p>作成した formData オブジェクト内に、別のオブジェクトも作成しました。これを favouriteColors と呼び、ユーザーに好みの色を選択するよう求めます: <br />
<br />
</p>
<div class="jb51code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">
<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
  </label>
</div>
ログイン後にコピー

ユーザーが上記のチェックボックスのいずれかをクリックすると、formData オブジェクトの変更がすぐに表示されます。チェックボックスの値を fromData.favoriteColors オブジェクトに保存します。このようにして、チェックボックスの値をサーバーに渡します。

チェックボックスのクリック処理

誰かがチェックボックスをクリックした後に、誰かと何かをする必要がある場合があります。実行する必要がある処理は、値の計算、変数の変更、データ バインディングの実行などです。これを行うには、$scope.yourFunction = function() {}; を使用して app.js 内に関数を作成します。次に、チェックボックスで ng-click="yourFunction()" を使用してこの関数を呼び出すことができます。

フォームのチェックボックスを処理する方法はたくさんありますが、Angular では非常に簡単な方法が提供されています。それは、ng-click を使用してユーザー定義関数を呼び出すことです。

チェックボックスに対応する値をカスタマイズします

デフォルトでは、チェックボックスにバインドされている値は true または false です。場合によっては、他の値を返したいことがあります。 Angular は、ng-ture-value と ng-false-value を使用して、これに対処する非常に優れた方法を提供します。

別のチェックボックスのセットを追加しますが、今回は true または false ではなく、ユーザー定義の値を使用します。

<!-- CUSTOM VALUE CHECKBOXES -->
<label>Personal Question</label>
<div class="checkbox">
  <label>
    <input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish">
    Are you awesome&#63;
  </label>
</div>
ログイン後にコピー

さらに、素晴らしい変数を formData オブジェクトに追加しました。この時点でこの値が true に設定されている場合、戻り値は ofCourse になるはずです。 false に設定されている場合、戻り値は iWish になるはずです。

チェックボックス

公式ドキュメントによると、これはラジオ ボタンとは異なります:

<input type="radio"
  ng-model="string"
  value="string"
  [name="string"]
  [ng-change="string"]
  ng-value="string">
ログイン後にコピー

チェックボックスの詳細については、Angular チェックボックスのドキュメントに従ってください。
ラジオボタン

ラジオ ボタンは複数選択データを保存する必要がないため、チェック ボックスよりも簡単です。ラジオ ボタンを追加してみましょう。

<!-- RADIO BUTTONS -->
<label>Chicken or the Egg&#63;</label>
<div class="form-group">
  <div class="radio">
    <label>
      <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">
      Chicken
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">
      Egg
    </label>
  </div>
</div>
ログイン後にコピー

このように、ラジオ ボタンがデータ オブジェクトにバインドされます。

ラジオボタンの使用法

公式ドキュメントによると、以下のオプションが提供されています:

<input type="radio"
    ng-model="string"
    value="string"
    [name="string"]
    [ng-change="string"]
    ng-value="string">
ログイン後にコピー

関連ラベル:
ソース:php.cn
前の記事:JQuery_jquery によって実装された画像とテキストの自動カルーセル効果プラグイン 次の記事:AngularJS_AngularJS の URL から # 文字を削除する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート