Відображення повторної інформації
Іноді нам може знадобитися відобразити список елементів у поданні, тому питання в тому, як ми можемо відобразити список елементів, визначених у нашому контролері, на нашій сторінці перегляду.
Angular забезпечує директиву під назвою "ng-repeat", яка може бути використана для відображення повторюваних значень, визначених у нашому контролері.
Давайте розглянемо приклад того, як ми можемо цього досягти.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Пояснення коду:
- У контролері ми спочатку визначаємо наш масив елементів списку, які ми хочемо визначити у поданні. Тут ми визначили масив "TopicNames", який містить три елементи. Кожен елемент складається з пари ім'я-значення.
- Потім масив TopicsNames додається до змінної-члена, що називається "topics", і приєднується до нашого об'єкту сфери.
- Ми використовуємо HTML-теги
- (Невпорядкований список) та
- (Елемент списку) для відображення списку елементів у нашому масиві. Потім ми використовуємо директиву ng-repeat для перегляду кожного елемента нашого масиву. Слово "tpname" - це змінна, яка використовується для вказівки на кожен елемент у масиві topics.TopicNames.
- У цьому ми відобразимо значення кожного елемента масиву.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат. Ви побачите всі відображені елементи масиву (в основному TopicNames у темах).
Вихід:
Кілька контролерів Angularjs
Прикладом вдосконаленого контролера може бути концепція наявності декількох контролерів у кутовій програмі JS.
Можливо, вам захочеться визначити кілька контролерів для розділення різних функцій бізнес-логіки. Раніше ми вже згадували про наявність різних методів у контролері, в яких один метод мав окрему функціональність для додавання та віднімання чисел. Ну, ви можете мати кілька контролерів, щоб мати більш досконале розділення логіки. Наприклад, у вас може бути один контролер, який виконує лише операції з числами, а інший - операції з рядками.
Давайте розглянемо приклад того, як ми можемо визначити кілька контролерів у програмі angular.JS.
Event Registration Guru99 Global Event
{{lname}}
Пояснення коду:
- Тут ми визначаємо 2 контролери, які називаються "firstController" і "secondController". Для кожного контролера ми також додаємо деякий код для обробки. У нашому firstController ми приєднуємо змінну "pname", яка має значення "firstController", а до secondController ми додаємо змінну "lname", яка має значення "secondController".
- На думку, ми отримуємо доступ до обох контролерів та використовуємо змінну-член з другого контролера.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат. Ви побачите весь текст "secondController", як очікувалося.
Вихід:
Резюме
- Директиву ng-repeater можна використовувати для відображення декількох повторюваних елементів.
- Ми також подивились вдосконалений контролер, який розглянув визначення декількох контролерів у програмі.