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

Автор: Джеймс Хартман Джеймс Хартман
Hours обновленный

Директива 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. При этом мы отобразим значение каждого элемента массива.

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

Вывод:

Директива 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. В представлении мы обращаемся к обоим контроллерам и используем переменную-член второго контроллера.

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

Вывод:

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

Итого

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

Вы могли бы: