Директива AngularJS ng-repeat із прикладом
Джеймс Гартман
Директива ng-repeat в AngularJS
Команда ng-повтор Директива в AngularJS використовується для відображення повторюваних значень, визначених у контролері. Іноді нам потрібно відобразити список елементів у поданні. Директива ng-repeat допомагає нам відображати список елементів, визначених у контролері, на сторінці перегляду.
Приклад директиви AngularJS ng-repeat
Давайте розглянемо приклад директиви 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>
Пояснення коду:
- У контролері ми спочатку визначаємо наш масив елементів списку, які ми хочемо визначити у поданні. Тут ми визначили масив під назвою “TopicNames”, який містить три елементи. Кожен елемент складається з пари ім’я-значення.
- Потім масив TopicsNames додається до змінної-члена під назвою “topics” і приєднується до нашого об’єкта області видимості.
- Ми використовуємо теги HTML (Невпорядкований список) і (Елемент списку), щоб відобразити список елементів у нашому масиві. Потім ми використовуємо директиву ng-repeat для перегляду кожного елемента нашого масиву. Слово “tpname” – це змінна, яка використовується для вказівки на кожен елемент у масиві topics.TopicNames.
- Тут ми відобразимо значення кожного елемента масиву.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат. Ви побачите всі елементи масиву (в основному назви тем у темах).
вихід:
Кілька контролерів AngularJS
Прикладом розширеного контролера може бути концепція наявності кількох контролерів у додатку angular 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>
Пояснення коду:
- Тут ми визначаємо 2 контролери під назвою «firstController» і «secondController». Для кожного контролера ми також додаємо код для обробки. У нашому firstController ми приєднуємо змінну під назвою «pname», яка має значення «firstController», а в secondController ми приєднуємо змінну під назвою «lname», яка має значення «secondController».
- У поданні ми отримуємо доступ до обох контролерів і використовуємо змінну-член з другого контролера.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат. Ви побачите весь текст «secondController», як очікувалося.
вихід:
Резюме
- Директива ng-repeat в AngularJS використовується для відображення кількох повторюваних елементів.
- Ми також подивилися на вдосконалений контролер, який дивився на визначення кількох контролерів у програмі.
