예제가 포함된 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>

Code 설명 :

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

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

출력:

AngularJS 다중 컨트롤러

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

서로 다른 비즈니스 로직 기능을 분리하기 위해 여러 개의 컨트롤러를 정의하는 것이 좋습니다. 앞서 컨트롤러에 덧셈과 뺄셈 기능을 각각 수행하는 여러 메서드를 갖는 것에 대해 언급했습니다.trac숫자 연산에 대해서 말씀드리자면, 여러 개의 컨트롤러를 사용하여 논리를 더욱 세분화할 수 있습니다. 예를 들어, 하나의 컨트롤러는 숫자 연산만 담당하고 다른 컨트롤러는 문자열 연산만 담당하도록 할 수 있습니다.

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>

Code 설명 :

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

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

출력:

제품 개요

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

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

AngularJS의 ng-repeat 지시문

AngularJS ng-repeat 지시문 예

AngularJS 다중 컨트롤러

제품 개요

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기