AngularJS フォームを実践的に学ぶ_AngularJS

フォームは最も一般的に使用されるコンポーネントです。 Angular.js では、フォームだけに追加される特別な機能はそれほど多くありません。ただし、Angular.js フレームワーク自体の特性を利用して、フォームをより親しみやすい方法で表示できます。以下では、一般的に使用されるいくつかの関数が Angular でどのように巧みに実装されているかを紹介します。

1. 入力ドメインデータに基づいて出力データをリアルタイムに更新します

次のコードは、ユーザーが入力したデータを処理し、リアルタイムでフォーム出力フィールドに表示できる単純な計算フォームを実装しています。

<div ng-app="" ng-init="quantity=1;price=5"> 
数量： <input type="number" ng-model="quantity"> 
价格： <input type="number" ng-model="price"> 
<p><b>总价：</b> {{ quantity * price }}</p> 
</div> 

2 つの ng モデルを定義することで、ユーザーが入力したデータをリアルタイムで監視し、{{}} を使用してデータを呼び出し、提案された計算フォーム関数がわずか数行のコードで完成します。

2. フォームリセット機能を実装します

次のコードは、フォームで頻繁に使用される関数、つまりフォームのリセットを実装しています。

HTML コード:

<div ng-app="myApp" ng-controller="formCtrl"> 
<form> 
First Name:<br> 
<input type="text" ng-model="user.firstName"><br> 
Last Name:<br> 
<input type="text" ng-model="user.lastName"> 
<br><br> 
<button ng-click="reset()">RESET</button> 
</form> 
<p>form = {{user}}</p> 
</div> 

JS コード:

var app = angular.module('myApp', []); 
app.controller('formCtrl', function($scope) { 
$scope.master = {firstName: "John", lastName: "Doe"}; 
$scope.reset = function() { 
$scope.user = angular.copy($scope.master); 
}; 
$scope.reset(); 
}); 

JS コントローラー コードでは、最初の時点でフォーム入力ボックスの値を保存するマスター オブジェクトを定義します。私たちは、reset() メソッドを定義しました。このメソッドが実行された後、angular.copy メソッドを使用して、マスター内の値がユーザーに割り当てられます。このメソッドは、フォーム フィールドをリセットするために使用されます。 HTML コードでは、ng-click マウス クリック イベントを使用して、reset() 関数をトリガーし、関数を実装します。

3. フォームのドロップダウン メニュー選択フィールド関数を実装します

Angular では、ドロップダウン メニューの実装は簡単です。 ng-repeat ディレクティブを使用すると、ドロップダウン メニューを簡単に実装できます:

まず、js モデルでデータを定義します。データ形式は次のとおりです。

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.names = ["Google", "Runoob", "Taobao"]; 
}); 

次に、ng-repeat を使用して HTML のモデル内のデータを読み取ります (具体的な意味については、前のブログを参照してください)

<div ng-app="myApp" ng-controller="myCtrl"> 
<select ng-model="selectedName" ng-options="x for x in names"> 
</select> 
</div> 

ドロップダウン メニューに関しては、データベースやリモートなどからのデータの読み取りも必要になります。さらに、ドロップダウン メニューを実装する方法は他にもあります。これらについては後で説明します。