예제가 포함된 AngularJS ng-repeat 지시문

AngularJS의 ng-repeat 지시문

The ng-반복 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>

코드 설명 :

컨트롤러에서는 먼저 뷰에서 정의하려는 목록 항목의 배열을 정의합니다. 여기서는 세 가지 항목이 포함된 "TopicNames"라는 배열을 정의했습니다. 각 항목은 이름-값 쌍으로 구성됩니다.
그런 다음 TopicsNames 배열이 "topics"라는 멤버 변수에 추가되고 범위 개체에 연결됩니다.
우리는 HTML 태그를 사용하고 있습니다 (순서가 없는 목록) 및 (목록 항목) 배열의 항목 목록을 표시합니다. 그런 다음 배열의 모든 항목을 살펴보기 위해 ng-repeat 지시문을 사용합니다. "tpname"이라는 단어는 topic.TopicNames 배열의 각 항목을 가리키는 데 사용되는 변수입니다.
여기에서는 각 배열 항목의 값을 표시합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행하면 다음 출력이 표시됩니다. 배열의 모든 항목(기본적으로 topics의 TopicNames)이 표시됩니다.

출력:

AngularJS 다중 컨트롤러

고급 컨트롤러의 예는 각도 JS 애플리케이션에 여러 컨트롤러를 갖는 개념입니다.

여러 개의 컨트롤러를 정의하여 다양한 비즈니스 로직 기능을 구분할 수 있습니다. 앞서 컨트롤러에 여러 개의 메소드를 두는 것에 대해 언급했는데, 한 메소드는 숫자의 덧셈과 뺄셈에 대한 별도의 기능을 가지고 있었습니다. 글쎄요, 로직을 더욱 고급스럽게 분리하기 위해 여러 개의 컨트롤러를 가질 수 있습니다. 예를 들어, 숫자에 대한 연산만 수행하는 컨트롤러 하나와 문자열에 대한 연산을 수행하는 다른 컨트롤러를 가질 수 있습니다.

Angular.JS 애플리케이션에서 여러 컨트롤러를 정의할 수 있는 방법의 예를 살펴보겠습니다.

<!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>

코드 설명 :

여기서는 "firstController"와 "secondController"라는 2개의 컨트롤러를 정의합니다. 각 컨트롤러에 대해 처리를 위한 일부 코드도 추가합니다. firstController에서는 "firstController" 값을 갖는 "pname"이라는 변수를 연결하고, secondController에서는 "secondController" 값을 갖는 "lname"이라는 변수를 연결합니다.
뷰에서는 두 컨트롤러 모두에 액세스하고 두 번째 컨트롤러의 멤버 변수를 사용하고 있습니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행하면 다음 출력이 표시됩니다. 예상대로 "secondController"의 모든 텍스트가 표시됩니다.

출력:

요약

ng-repeat 지시문은 AngularJS와 여러 반복 항목을 표시하는 데 사용됩니다.
또한 애플리케이션에서 여러 컨트롤러의 정의를 살펴보는 고급 컨트롤러를 살펴보았습니다.

당신은 좋아할 것입니다 :