AngularJS ng-repeat ディレクティブと例

AngularJS の ng-repeat ディレクティブ

また, NGリピート AngularJS のディレクティブは、コントローラーで定義された繰り返し値を表示するために使用されます。 場合によっては、ビューに項目のリストを表示する必要があります。 ng-repeat ディレクティブは、コントローラーで定義された項目のリストをビュー ページに表示するのに役立ちます。

AngularJS ng-repeat ディレクティブの例

AngularJS の ng-repeat ディレクティブの例を見てみましょう。

AngularJS の ng-repeat ディレクティブ

<!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="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
		{{tpname.name}}
		</li></ul>
</div>

<script> 
	var app = angular.module('DemoApp',[]);
	app.controller('DemoController', function($scope){

	$scope.TopicNames =[
		{name: "What controller do from Angular's perspective"},
		{name: "Controller Methods"},
		{name: "Building a basic controller"}];	
		});
</script>

</body>
</html>

コードの説明:

  1. コントローラーでは、まずビューで定義するリスト項目の配列を定義します。 ここでは、XNUMX つの項目を含む「TopicNames」という配列を定義しました。 各項目は名前と値のペアで構成されます。
  2. 次に、TopicsName の配列が「topics」というメンバー変数に追加され、スコープ オブジェクトにアタッチされます。
  3. のHTMLタグを使用しています。 (順序なしリスト) および(List Items) を使用して、配列内の項目のリストを表示します。 次に、ng-repeat ディレクティブを使用して、配列内のすべての項目を調べます。 「tpname」という単語は、配列 topic.TopicNames 内の各項目を指すために使用される変数です。
  4. ここでは、配列の各項目の値を表示します。

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。 配列のすべての項目 (基本的にはトピック内の TopicNames) が表示されます。

出力:

AngularJS の ng-repeat ディレクティブ

AngularJS の複数のコントローラー

高度なコントローラーの例は、Angular JS アプリケーションに複数のコントローラーを持つという概念です。

複数のコントローラーを定義して、異なるビジネス ロジック機能を分離することが必要になる場合があります。 先ほど、コントローラー内にさまざまなメソッドがあり、XNUMX つのメソッドが数値の加算と減算の個別の機能を持つことについて説明しました。 複数のコントローラーを使用して、ロジックをより高度に分離することができます。 たとえば、XNUMX つのコントローラーは数値の操作のみを実行し、もう XNUMX つは文字列の操作を実行することができます。

angular.JS アプリケーションで複数のコントローラーを定義する方法の例を見てみましょう。

AngularJS の複数のコントローラー

<!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">
	<div ng-controller="firstcontroller">
		<div ng-controller="secondcontroller">
		{{lname}}
		</div>
	</div>
</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('firstcontroller', function($scope){
		$scope.pname="firstcontroller";
			});
		app.controller('secondcontroller', function($scope){
			$scope.lname="secondcontroller";
			});
</script>
</body>
</html>

コードの説明:

  1. ここでは「firstController」と「secondController」という 2 つのコントローラーを定義しています。 各コントローラーには、処理用のコードも追加しています。 firstController では、値「firstController」を持つ「pname」という変数をアタッチし、 SecondController では、値「secondController」を持つ「lname」という変数をアタッチします。
  2. ビューでは、両方のコントローラーにアクセスし、XNUMX 番目のコントローラーのメンバー変数を使用しています。

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。 期待どおり、「secondController」のすべてのテキストが表示されます。

出力:

AngularJS の複数のコントローラー

まとめ

  • の ng-repeat ディレクティブ AngularJS 複数の繰り返し項目を表示するために使用されます。
  • また、アプリケーション内の複数のコントローラーの定義を調べる高度なコントローラーについても調べました。