Отображение повторяющейся информации
Иногда нам может потребоваться отобразить список элементов в представлении, поэтому вопрос заключается в том, как мы можем отобразить список элементов, определенных в нашем контроллере, на нашей странице просмотра.
Angular предоставляет директиву ng-repeat, которую можно использовать для отображения повторяющихся значений, определенных в нашем контроллере.
Давайте посмотрим на примере, как мы можем этого добиться.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Пояснение к коду:
- В контроллере мы сначала определяем наш массив элементов списка, который мы хотим определить в представлении. Здесь мы определили массив под названием «TopicNames», который содержит три элемента. Каждый элемент состоит из пары имя-значение.
- Затем массив TopicsNames добавляется к переменной-члену, называемой «themes», и присоединяется к нашему объекту области видимости.
- Мы используем HTML-теги
- (неупорядоченный список) и
- (элемент списка) для отображения списка элементов в нашем массиве. Затем мы используем директиву ng-repeat для просмотра каждого элемента в нашем массиве. Слово «tpname» - это переменная, которая используется для указания каждого элемента в массиве themes.TopicNames.
- Здесь мы отобразим значение каждого элемента массива.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат. Вы увидите все элементы массива (в основном, имена тем в темах).
Выход:
Несколько контроллеров Angularjs
Примером расширенного контроллера может быть концепция наличия нескольких контроллеров в приложении angular JS.
Возможно, вы захотите определить несколько контроллеров для разделения различных функций бизнес-логики. Ранее мы упоминали о наличии различных методов в контроллере, в которых один метод имел отдельные функции для сложения и вычитания чисел. Что ж, у вас может быть несколько контроллеров для более продвинутого разделения логики. Например, у вас может быть один контроллер, который выполняет только операции с числами, а другой - со строками.
Давайте посмотрим на пример того, как мы можем определить несколько контроллеров в приложении angular.JS.
Event Registration Guru99 Global Event
{{lname}}
Пояснение к коду:
- Здесь мы определяем 2 контроллера с именами «firstController» и «secondController». Для каждого контроллера мы также добавляем код для обработки. В нашем firstController мы присоединяем переменную с именем «pname», которая имеет значение «firstController», а в secondController мы присоединяем переменную с именем «lname», которая имеет значение «secondController».
- В представлении мы обращаемся к обоим контроллерам и используем переменную-член из второго контроллера.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат. Вы увидите весь текст «secondController», как и ожидалось.
Выход:
Резюме
- Директива ng-Repeater может использоваться для отображения нескольких повторяющихся элементов.
- Мы также рассмотрели расширенный контроллер, который рассматривал определение нескольких контроллеров в приложении.