Директива AngularJS ng-repeat с примером

Директива ng-repeat в AngularJS

нг-повторить Директива в AngularJS используется для отображения повторяющихся значений, определенных в контроллере. Иногда нам требуется отобразить список элементов в представлении. Директива ng-repeat помогает нам отображать список элементов, определенных в контроллере, на странице просмотра.

Пример директивы AngularJS ng-repeat

Давайте посмотрим пример директивы ng-repeat в AngularJS:

Директива ng-repeat в 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" 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. В контроллере мы сначала определяем массив элементов списка, которые хотим определить в представлении. Здесь мы определили массив под названием «TopicNames», который содержит три элемента. Каждый элемент состоит из пары имя-значение.
  2. Затем массив TopicsNames добавляется к переменной-члену под названием «topics» и прикрепляется к нашему объекту области.
  3. Мы используем HTML-теги (Неупорядоченный список) и (Элемент списка), чтобы отобразить список элементов нашего массива. Затем мы используем директиву ng-repeat для просмотра каждого элемента нашего массива. Слово «tpname» — это переменная, которая используется для указания на каждый элемент массива theme.TopicNames.
  4. При этом мы отобразим значение каждого элемента массива.

Если код выполнен успешно, тоwing Вывод будет показан, когда вы запустите свой код в браузере. Вы увидите все элементы массива (в основном имена тем в темах).

Вывод:

Директива ng-repeat в AngularJS

Несколько контроллеров AngularJS

Примером расширенного контроллера может быть концепция наличия нескольких контроллеров в приложении Angular JS.

Возможно, вы захотите определить несколько контроллеров для разделения различных функций бизнес-логики. Ранее мы упоминали о наличии в контроллере разных методов, в которых один метод имел отдельные функции для сложения и вычитания чисел. Что ж, вы можете иметь несколько контроллеров, чтобы иметь более продвинутое разделение логики. Например, у вас может быть один контроллер, который выполняет только операции с числами, а другой — со строками.

Давайте посмотрим на пример того, как мы можем определить несколько контроллеров в приложении 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» и «второй контроллер». Для каждого контроллера мы также добавляем код для обработки. В наш firstController мы добавляем переменную с именем «pname», которая имеет значение «firstController», а во второй контроллер мы присоединяем переменную с именем «lname», которая имеет значение «второйконтроллер».
  2. В представлении мы обращаемся к обоим контроллерам и используем переменную-член второго контроллера.

Если код выполнен успешно, тоwing Вывод будет показан, когда вы запустите свой код в браузере. Вы увидите весь текст «второго контроллера», как и ожидалось.

Вывод:

Несколько контроллеров AngularJS

Итоги

  • Директива ng-repeat в AngularJS используется для отображения нескольких повторяющихся элементов.
  • Мы также рассмотрели расширенный контроллер, в котором рассматривается определение нескольких контроллеров в приложении.