Dyrektywa AngularJS ng-powtórzeń z przykładem

Spisie treści:

Anonim

Wyświetlanie powtarzających się informacji

Czasami może być wymagane wyświetlenie listy elementów w widoku, więc pytanie brzmi, jak wyświetlić listę elementów zdefiniowanych w naszym kontrolerze na naszej stronie widoku.

Angular udostępnia dyrektywę o nazwie „ng-repeat”, która może być używana do wyświetlania powtarzających się wartości zdefiniowanych w naszym kontrolerze.

Spójrzmy na przykład, jak możemy to osiągnąć.

Event Registration


Guru99 Global Event




Topics


    

  • {{tpname.name}}
    •

Objaśnienie kodu:

  1. W kontrolerze najpierw definiujemy naszą tablicę elementów listy, które chcemy zdefiniować w widoku. Tutaj zdefiniowaliśmy tablicę o nazwie „TopicNames”, która zawiera trzy elementy. Każdy element składa się z pary nazwa-wartość.
  2. Tablica TopicsNames jest następnie dodawana do zmiennej składowej o nazwie „Tematy” i dołączana do naszego obiektu zasięgu.
  3. Używamy znaczników HTML
      (lista nieuporządkowana) i
    • (pozycja listy), aby wyświetlić listę elementów w naszej tablicy. Następnie używamy dyrektywy ng-repeat do przechodzenia przez każdy element w naszej tablicy. Słowo „tpname” jest zmienną używaną do wskazywania każdego elementu tablicy topics.TopicNames.
    • W tym celu wyświetlimy wartość każdego elementu tablicy.

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce. Zobaczysz wszystkie elementy tablicy (w zasadzie TopicNames w tematach).

Wynik:

Angularjs Wiele kontrolerów

Przykładem zaawansowanego kontrolera byłaby koncepcja posiadania wielu kontrolerów w kątowej aplikacji JS.

Możesz chcieć zdefiniować wiele kontrolerów, aby oddzielić różne funkcje logiki biznesowej. Wcześniej wspominaliśmy o różnych metodach kontrolera, w których jedna metoda miała oddzielną funkcjonalność do dodawania i odejmowania liczb. Cóż, możesz mieć wiele kontrolerów, aby uzyskać bardziej zaawansowaną separację logiki. Na przykład, możesz mieć jeden kontroler, który wykonuje tylko operacje na liczbach, a drugi, który wykonuje operacje na łańcuchach.

Spójrzmy na przykład, jak możemy zdefiniować wiele kontrolerów w aplikacji angular.JS.

Event Registration


Guru99 Global Event


{{lname}}

Objaśnienie kodu:

  1. Tutaj definiujemy 2 kontrolery o nazwach „firstController” i „secondController”. Do każdego kontrolera dodajemy również kod do przetwarzania. W naszym firstController dołączamy zmienną o nazwie „pname”, która ma wartość „firstController”, aw secondController dołączamy zmienną o nazwie „lname”, która ma wartość „secondController”.
  2. W tym widoku uzyskujemy dostęp do obu kontrolerów i używamy zmiennej składowej z drugiego kontrolera.

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce. Zobaczysz cały tekst „secondController” zgodnie z oczekiwaniami.

Wynik:

Podsumowanie

  • Dyrektywa ng-repeater może służyć do wyświetlania wielu powtarzających się elementów.
  • Przyjrzeliśmy się również zaawansowanemu kontrolerowi, który przyjrzał się definicji wielu kontrolerów w aplikacji.