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

替え： ジェームズ・ハートマン ジェームズ・ハートマン
Hours 更新中

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. ここでは、配列の各項目の値を表示します。

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

出力：

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

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

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

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

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 番目のコントローラーのメンバー変数を使用しています。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。予想どおりに「secondController」のすべてのテキストが表示されます。

出力：

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

まとめ

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

よろしければ：