AngularJS ng-repeat директива с пример
Джеймс Хартман
Директива ng-repeat в AngularJS
- ng-повтаряне директива в AngularJS се използва за показване на повтарящи се стойности, дефинирани в контролера. Понякога изискваме показване на списък с елементи в изгледа. Директивата ng-repeat ни помага да покажем списък с елементи, дефинирани в контролера, на страница за преглед.
Пример за директива AngularJS ng-repeat
Нека да разгледаме пример за директива ng-repeat в 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>
Обяснение на кода:
- В контролера първо дефинираме нашия масив от елементи от списъка, които искаме да дефинираме в изгледа. Тук сме дефинирали масив, наречен „TopicNames“, който съдържа три елемента. Всеки елемент се състои от двойка име-стойност.
- След това масивът от TopicsNames се добавя към членска променлива, наречена „теми“, и се прикачва към нашия обект на обхват.
- Ние използваме HTML таговете на (Неподреден списък) и (Елемент от списък), за да се покаже списъкът с елементи в нашия масив. След това използваме директивата ng-repeat за преминаване през всеки един елемент в нашия масив. Думата “tpname” е променлива, която се използва за насочване към всеки елемент в масива topics.TopicNames.
- В това ще покажем стойността на всеки елемент от масива.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра. Ще видите всички елементи от масива (основно имената на темите в темите) показани.
Изход:
AngularJS множество контролери
Пример за усъвършенстван контролер би била концепцията за наличие на множество контролери в ъглово JS приложение.
Може да искате да дефинирате множество контролери, за да разделите различни бизнес логически функции. По-рано споменахме за наличието на различни методи в контролер, в който един метод има отделна функционалност за събиране и изваждане на числа. Е, можете да имате няколко контролера, за да имате по-разширено разделяне на логиката. Например, можете да имате един контролер, който извършва само операции с числа, а другият извършва операции с низове.
Нека да разгледаме пример за това как можем да дефинираме множество контролери в 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>
Обяснение на кода:
- Тук дефинираме 2 контролера, наречени „firstController“ и „secondController“. За всеки контролер добавяме и код за обработка. В нашия firstController прикачваме променлива, наречена „pname“, която има стойност „firstController“, а във secondController прикачваме променлива, наречена „lname“, която има стойността „secondController“.
- В изгледа имаме достъп до двата контролера и използваме членската променлива от втория контролер.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра. Ще видите целия текст на „secondController“, както се очаква.
Изход:
Oбобщение
- Директивата ng-repeat в AngularJS се използва за показване на множество повтарящи се елементи.
- Разгледахме и усъвършенстван контролер, който разгледа дефиницията на множество контролери в приложение.
