AngularJS で「ng-model」を使用する方法と例

AngularJs の ng-model とは何ですか?

ng-model はモデルを表す Angular.JS のディレクティブであり、その主な目的は「ビュー」を「モデル」にバインドすることです。

たとえば、以下に示すような単純なページをエンド ユーザーに表示し、ユーザーに「名」と「姓」をテキストで入力するよう求めるとします。boxエス。 そして、ユーザーが入力した情報をデータ モデルに確実に保存したいと考えました。

ng-model ディレクティブを使用してテキストをマッピングできます。 box 「名」と「姓」のフィールドをデータ モデルに追加します。

ng-model ディレクティブは、「ビュー」内のデータと「モデル」のデータが確実に保持されるようにします。 sync ずっと。

AngularJS の ng モデル

ng-model 属性

この章の導入部分で説明したように、ng-model 属性は、モデル内のデータをユーザーに表示されるビューにバインドするために使用されます。

ng-model 属性は次の目的で使用されます。

  1. ビュー内の入力、テキスト領域、選択などのコントロールをモデルにバインドします。
  2. 検証動作を提供します。たとえば、テキストに検証を追加できます。 box テキストに入力できるのは数字のみであること box.
  3. ng-model 属性はコントロールの状態を維持します (状態とは、コントロールとデータが常に維持されることを意味します) sync。データの値が変更されると、コントロールの値も自動的に変更され、その逆も同様です)

ngモデルの使い方

1) テキストエリア

テキスト領域タグは、複数行のテキスト入力コントロールを定義するために使用されます。 テキスト領域には無制限の文字数を含めることができ、テキストは固定幅フォントで表示されます。

それでは、ng-model ディレクティブをテキストエリアコントロールに追加する方法の簡単な例を見てみましょう。

この例では、複数行の文字列をコントローラーからビューに渡し、その値をテキスト エリア コントロールにアタッチする方法を示します。

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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
	<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>

コードの説明:

  1. 最大XNUMXWの出力を提供する ng-model ディレクティブ 「pDescription」というメンバー変数を「textarea」コントロールに添付するために使用されます。「pDescription」変数には実際にテキストが含まれており、テキストエリアコントロールに渡されます。 textarea コントロールの 2 つの属性、つまり rows=4 とcols=50 についても説明しました。 これらの属性は、複数行のテキストを表示できるようにするために記載されています。 これらの属性を定義すると、テキストエリアは 4 行 50 列になり、複数行のテキストを表示できるようになります。
  2. ここでは、メンバー変数を「pDescription」というスコープ オブジェクトにアタッチし、その変数に文字列値を代入しています。
  3. テキスト領域に表示されるときにテキストが複数行になるように、文字列に /n リテラルを入れていることに注意してください。 /n リテラルはテキストを複数行に分割し、textarea コントロールで複数行のテキストとして表示できるようにします。

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると出力が表示されます。

出力:

ng-modelのテキストエリア

出力から、

  • スコープ オブジェクトの一部として pDescription 変数に割り当てられた値が textarea コントロールに渡されたことが明確にわかります。
  • 以降、ページ読み込み時に表示されるようになりました。

2) 入力要素

ng-model ディレクティブは、テキストなどの入力要素にも適用できます。 boxチェックboxes、ラジオボタンなど。

「テキスト」で ng モデルを使用する方法の例を見てみましょう。box」と「チェック」box" 入力方式。

ここでは「Guru99」という名前のテキスト入力タイプがあり、チェックが 2 つあります。boxXNUMX つはデフォルトでマークされ、もう XNUMX つはマークされません。

ng-modelの入力要素

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pname"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
		<input type="checkbox" ng-model="Topic.Controller">Controller<br>&nbsp;&nbsp;&nbsp;
		<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>

コードの説明:

  1. 最大XNUMXWの出力を提供する ng-model ディレクティブ は、「pname」というメンバー変数を入力タイプのテキスト コントロールに付加するために使用されます。 「pname」変数には、テキスト入力コントロールに渡される「Guru99」のテキストが含まれます。 なお、メンバ変数名には任意の名前を付けることができます。
  2. ここで最初のチェックを定義しますbox メンバ変数 Topics.Controllers に付加される「Controllers」。 小切手box このチェック コントロールに対してマークが付けられます。
  3. ここで最初のチェックを定義しますbox メンバー変数 Topics.Models に付加される「Models」。 小切手box このチェック コントロールではマークされません。
  4. ここでは、「pName」というメンバー変数をアタッチし、「Guru99」という文字列値を入れています。
  5. 「Topics」というメンバー配列変数を宣言し、それに XNUMX つの値を与えています。XNUMX つ目は「true」、XNUMX つ目は「false」です。box true の値を取得します。box このコントロールに対してマークされます。wise、2 番目の値が false であるため、チェックはbox このコントロールではマークされません。

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

ng-modelの入力要素

出力から、

  • pName 変数に割り当てられた値が「Guru99」であることがはっきりとわかります。
  • 最初のチェック値が「true」なので合格したので、box 「コントローラー」チェックマークが付いていますbox。 様wise 2 番目の値が false であるため、チェックはbox 「モデル」チェックのマークが付いていませんbox.

3) ドロップダウンから要素を選択します

ng-model ディレクティブは、select 要素に適用することもでき、選択リスト内のリスト項目を設定するために使用できます。

select 入力タイプで ng-model を使用する方法の例を見てみましょう。

ここでは、「Guru99」という名前のテキスト入力タイプがあり、「Controller」と「Models」の 2 つのリスト項目を含む選択リストがあります。

ng-modelのドロップダウンから要素を選択します

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pName" value="Guru99"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
        
		<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>
  1. 最大XNUMXWの出力を提供する ng-model ディレクティブ 「Topics」というメンバー変数を選択タイプのコントロールに付加するために使用されます。 選択コントロール内で、各オプションについて、最初のオプションには Topics.option1 のメンバー変数を、2 番目のオプションには Topics.optionXNUMX のメンバー変数をアタッチします。
  2. ここでは、2 つのキーと値のペアを保持する Topics 配列変数を定義しています。 最初のペアの値は「Controllers」で、XNUMX 番目のペアの値は「Models」です。 これらの値は、ビュー内の選択入力タグに渡されます。コードが正常に実行されると、次のようになります。wing 出力が表示されます。

出力:

ng-modelのドロップダウンから要素を選択します

出力から、pName 変数に割り当てられた値が「Guru99」であることがわかり、選択入力コントロールには「Controllers」と「Models」のオプションがあることがわかります。

まとめ

  • Angular JS のモデルは、ng-model ディレクティブによって表されます。 このディレクティブの主な目的は、ビューをモデルにバインドすることです。 ng-app、ng-controller、ng-model ディレクティブを使用して単純なコントローラーを構築する方法。
  • ng-model ディレクティブは「テキストエリア」入力コントロールにリンクでき、複数行の文字列をコントローラーからビューに渡すことができます。
  • ng-model ディレクティブは、テキストやチェックなどの入力コントロールにリンクできます。box コントロールを使用して、実行時により動的にすることができます。
  • ng-model ディレクティブを使用して、ユーザーに表示できるオプションを選択リストに追加することもできます。