AngularJS で「ng-model」を使用する方法と例
ジェームズ・ハートマン
AngularJs の ng-model とは何ですか?
ng-model はモデルを表す Angular.JS のディレクティブであり、その主な目的は「ビュー」を「モデル」にバインドすることです。
たとえば、エンド ユーザーにテキスト ボックスに「名」と「姓」を入力するよう求める、以下に示すような簡単なページを表示したいとします。次に、ユーザーが入力した情報をデータ モデルに保存したいとします。
ng-model ディレクティブを使用して、「First name」と「Last Name」のテキスト ボックス フィールドをデータ モデルにマップできます。
ng-model ディレクティブは、「ビュー」のデータと「モデル」のデータが常に同期された状態に保たれることを保証します。
ng-model 属性
この章の導入部分で説明したように、ng-model 属性は、モデル内のデータをユーザーに表示されるビューにバインドするために使用されます。
ng-model 属性は次の目的で使用されます。
- ビュー内の入力、テキスト領域、選択などのコントロールをモデルにバインドします。
- 検証動作を提供します。たとえば、テキスト ボックスに数字のみを入力できるという検証をテキスト ボックスに追加できます。
- ng-model 属性はコントロールの状態を維持します (状態とは、コントロールとデータが常に同期されていることを意味します。データの値が変更されると、コントロールの値も自動的に変更され、その逆も同様です)
ngモデルの使い方
1) テキストエリア
テキスト領域タグは、複数行のテキスト入力コントロールを定義するために使用されます。 テキスト領域には無制限の文字数を含めることができ、テキストは固定幅フォントで表示されます。
それでは、ng-model ディレクティブをテキストエリアコントロールに追加する方法の簡単な例を見てみましょう。
この例では、複数行の文字列をコントローラーからビューに渡し、その値をテキスト エリア コントロールにアタッチする方法を示します。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"});
</script>
</body>
</html>
コードの説明：
- この ng-model ディレクティブ は「p」と呼ばれるメンバー変数を添付するために使用されますDescript「テキストエリア」コントロールに「pDescription” 変数には実際にテキストが含まれ、テキスト エリア コントロールに渡されます。また、textarea コントロールの 2 つの属性、rows=4 と cols=50 についても説明しました。これらの属性は、複数行のテキストを表示できるようにするために指定されています。これらの属性を定義すると、textarea には 4 行 50 列が含まれるようになり、複数行のテキストを表示できるようになります。
- ここでは、メンバー変数を「p」というスコープオブジェクトにアタッチしています。Descript「ion」と入力し、変数に文字列値を代入します。
- テキストがテキスト領域に表示されるときに複数行になるように、文字列に /n リテラルを入れていることに注意してください。 /n リテラルはテキストを複数行に分割し、テキスト領域コントロールで複数行のテキストとしてレンダリングできるようにします。
コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。
出力：
出力から、
- pに割り当てられた値は明らかにDescriptスコープ オブジェクトの一部としての ion 変数がテキスト エリア コントロールに渡されました。
- その後、ページが読み込まれると表示されるようになりました。
2) 入力要素
ng-model ディレクティブは、テキスト ボックス、チェック ボックス、ラジオ ボタンなどの入力要素にも適用できます。
「テキストボックス」と「チェックボックス」の入力タイプで ng-model を使用する方法の例を見てみましょう。
ここでは、「Guru99」という名前のテキスト入力タイプがあり、2 つのチェックボックスがあります。XNUMX つはデフォルトでマークされ、もう XNUMX つはマークされません。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pname"><br>
Topic : <br>
<input type="checkbox" ng-model="Topic.Controller">Controller<br>
<input type="checkbox" ng-model="Topic.Models">Models
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pname="Guru99";
$scope.Topic =
{
Controller:true,
Models:false
}; });
</script>
</body>
</html>
コードの説明：
- この ng-model ディレクティブ は、「pname」というメンバー変数を入力タイプのテキスト コントロールに付加するために使用されます。 「pname」変数には、テキスト入力コントロールに渡される「Guru99」のテキストが含まれます。 なお、メンバ変数名には任意の名前を付けることができます。
- ここでは、メンバー変数 Topics.Controllers にアタッチされた最初のチェックボックス「Controllers」を定義しています。チェックボックスは、このチェック コントロールに対してマークされます。
- ここでは、メンバー変数 Topics.Models にアタッチされる最初のチェックボックス「Models」を定義しています。このチェック コントロールでは、チェックボックスはマークされません。
- ここでは、「pName」というメンバー変数をアタッチし、「Guru99」という文字列値を入れています。
- 「Topics」というメンバー配列変数を宣言し、それに 2 つの値 (1 つ目は「true」、2 つ目は「false」) を設定します。したがって、最初のチェックボックスの値が true の場合、このコントロールのチェックボックスはマークされます。同様に、2 番目の値が false の場合、このコントロールのチェックボックスはマークされません。
コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。
出力：
出力から、
- pName 変数に割り当てられた値が「Guru99」であることがはっきりとわかります。
- 最初のチェック値が「true」なので合格となり、「コントローラー」チェックボックスのチェックボックスがオンになります。同様に、2 番目の値が「false」なので、「モデル」チェックボックスのチェックボックスはオンになりません。
3) ドロップダウンから要素を選択します
ng-model ディレクティブは、select 要素に適用することもでき、選択リスト内のリスト項目を設定するために使用できます。
select 入力タイプで ng-model を使用する方法の例を見てみましょう。
ここでは、「Guru99」という名前のテキスト入力タイプがあり、「Controller」と「Models」の 2 つのリスト項目を含む選択リストがあります。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pName" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- この ng-model ディレクティブ 「Topics」というメンバー変数を選択タイプのコントロールに付加するために使用されます。 選択コントロール内で、各オプションについて、最初のオプションには Topics.option1 のメンバー変数を、2 番目のオプションには Topics.optionXNUMX のメンバー変数をアタッチします。
- ここでは、2 つのキーと値のペアを保持する Topics 配列変数を定義しています。最初のペアの値は「Controllers」で、XNUMX 番目のペアの値は「Models」です。これらの値は、ビューの select 入力タグに渡されます。コードが正常に実行されると、次の出力が表示されます。
出力：
出力から、pName 変数に割り当てられた値が「Guru99」であることがわかり、選択入力コントロールには「Controllers」と「Models」のオプションがあることがわかります。
まとめ
- Angular JS のモデルは、ng-model ディレクティブによって表されます。 このディレクティブの主な目的は、ビューをモデルにバインドすることです。 ng-app、ng-controller、ng-model ディレクティブを使用して単純なコントローラーを構築する方法。
- ng-model ディレクティブは「テキストエリア」入力コントロールにリンクでき、複数行の文字列をコントローラーからビューに渡すことができます。
- ng-model ディレクティブをテキスト コントロールやチェックボックス コントロールなどの入力コントロールにリンクして、実行時にそれらをより動的にすることができます。
- ng-model ディレクティブは、ユーザーに表示できるオプションを選択リストに入力するためにも使用できます。
