Dyrektywa AngularJS ng-repeat z przykładem
Jamesa Hartmana
Dyrektywa ng-repeat w AngularJS
ng-powtórz dyrektywa w AngularJS służy do wyświetlania powtarzających się wartości zdefiniowanych w kontrolerze. Czasami wymagamy wyświetlenia listy elementów w widoku. Dyrektywa ng-repeat pomaga nam wyświetlić na stronie widoku listę elementów zdefiniowanych w kontrolerze.
Przykład dyrektywy AngularJS ng-repeat
Spójrzmy na przykład dyrektywy ng-repeat w 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>
Wyjaśnienie kodu:
- W kontrolerze najpierw definiujemy 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ść.
- Tablica TopicsNames jest następnie dodawana do zmiennej składowej zwanej „tematy” i dołączana do naszego obiektu zakresu.
- Używamy tagów HTML (Lista nieuporządkowana) i (List Item), aby wyświetlić listę elementów w naszej tablicy. Następnie używamy dyrektywy ng-repeat do przeglądania każdego elementu naszej tablicy. Słowo „tpname” jest zmienną używaną do wskazania każdego elementu w tablicy topics.TopicNames.
- W tym przypadku wyświetlimy wartość każdego elementu tablicy.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący Output. Zobaczysz wszystkie elementy tablicy (zasadniczo TopicNames w tematach).
Wyjście:
AngularJS Wiele kontrolerów
Przykładem zaawansowanego kontrolera może być koncepcja posiadania wielu kontrolerów w angularnej aplikacji JS.
Możesz chcieć zdefiniować wiele kontrolerów, aby oddzielić różne funkcje logiki biznesowej. Wcześniej wspomnieliśmy o posiadaniu różnych metod w kontrolerze, w którym jedna metoda miała osobną funkcjonalność dodawania i odejmowania liczb. Cóż, możesz mieć wiele kontrolerów, aby mieć bardziej zaawansowane oddzielenie logiki. Na przykład możesz mieć jeden kontroler, który wykonuje tylko operacje na liczbach, a drugi, który wykonuje operacje na ciągach znaków.
Spójrzmy na przykład, jak możemy zdefiniować wiele kontrolerów w aplikacji 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>
Wyjaśnienie kodu:
- Tutaj definiujemy 2 kontrolery zwane „pierwszym kontrolerem” i „drugim kontrolerem”. Do każdego kontrolera dodajemy także kod do przetwarzania. Do naszego pierwszego Kontrolera dołączamy zmienną o nazwie „pname”, która ma wartość „firstController”, a w drugim Kontrolerze dołączamy zmienną o nazwie „lname”, która ma wartość „drugi Kontroler”.
- W tym widoku uzyskujemy dostęp do obu kontrolerów i używamy zmiennej członkowskiej z drugiego kontrolera.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik. Zobaczysz cały tekst „secondController”, jak oczekiwano.
Wyjście:
Podsumowanie
- Dyrektywa ng-repeat w angularjs służy do wyświetlania wielu powtarzających się elementów.
- Przyjrzeliśmy się także zaawansowanemu kontrolerowi, który sprawdzał definicję wielu kontrolerów w aplikacji.
