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

Съдържание:

Anonim

Показване на повтаряща се информация

Понякога може да се наложи да покажем списък с елементи в изгледа, така че въпросът е как можем да покажем списък с елементи, дефинирани в нашия контролер, на страницата ни с изглед.

Angular предоставя директива, наречена "ng-repeat", която може да се използва за показване на повтарящи се стойности, дефинирани в нашия контролер.

Нека разгледаме пример за това как можем да постигнем това.

Event Registration


Guru99 Global Event




Topics


    

  • {{tpname.name}}
    •

Обяснение на кода:

  1. В контролера първо дефинираме нашия масив от елементи от списъка, които искаме да дефинираме в изгледа. Тук дефинирахме масив, наречен "TopicNames", който съдържа три елемента. Всеки елемент се състои от двойка име-стойност.
  2. След това масивът от TopicsNames се добавя към променлива на член, наречена "topics" и се прикачва към нашия обект на обхват.
  3. Използваме HTML таговете на
      (неуреден списък) и
    • (списъчен елемент), за да покажем списъка с елементи в нашия масив. След това използваме директивата ng-repeat за преминаване през всеки елемент от нашия масив. Думата "tpname" е променлива, която се използва за насочване към всеки елемент в масива topics.TopicNames.
    • В това ще покажем стойността на всеки елемент от масива.

Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход. Ще видите всички показани елементи от масива (основно TopicNames в теми).

Изход:

Множество контролери на Angularjs

Пример за усъвършенстван контролер би била концепцията за наличието на множество контролери в ъглово JS приложение.

Може да искате да дефинирате множество контролери, за да разделите различни функции на бизнес логиката. По-рано споменахме за наличието на различни методи в контролер, при които единият метод има отделна функционалност за събиране и изваждане на числа. Е, можете да имате множество контролери, за да имате по-напреднало разделяне на логиката. Например можете да имате единия контролер, който прави само операции с числа, а другият, който извършва операции с низове.

Нека разгледаме пример за това как можем да дефинираме множество контролери в приложение angular.JS.

Event Registration


Guru99 Global Event


{{lname}}

Обяснение на кода:

  1. Тук дефинираме 2 контролера, наречени "firstController" и "secondController". За всеки контролер също добавяме някакъв код за обработка. В нашия firstController ние прикачваме променлива, наречена "pname", която има стойността "firstController", а във secondController прикачваме променлива, наречена "lname", която има стойността "secondController".
  2. В изгледа имаме достъп до двата контролера и използваме променливата член от втория контролер.

Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход. Ще видите целия текст на "secondController", както се очаква.

Изход:

Обобщение

  • Директивата ng-repeater може да се използва за показване на множество повтарящи се елементи.
  • Разгледахме и усъвършенстван контролер, който разгледа дефиницията на множество контролери в приложение.