Директива AngularJS ng-repeat із прикладом

Автор: Джеймс Гартман Джеймс Гартман
Hours оновлений

⚡ Розумний підсумок

Директива ng-repeat в AngularJS рендерить одну копію елемента для кожного елемента в колекції, визначеній в області видимості контролера. Вона перетворює масив на список, таблицю або будь-яку повторювану розмітку без написання циклу вручну.

  • 🔁 Основна поведінка: ng-repeat клонує свій хост-елемент один раз для кожного елемента, тому директива належить елементу, що повторюється, а не його контейнеру.
  • 🏷️ Змінна циклу: Ім'я перед словом in стає локальним псевдонімом для поточного елемента всередині цього клону.
  • 🧬 Дочірня область застосування: Кожна ітерація отримує власну дочірню область видимості, тому призначення примітиву всередині циклу не досягає батьківського.
  • 🔑 Особистість Tracking: A tracВираз k за допомогою вказує AngularJS, як ідентифікувати елементи, і він потрібен, коли колекція містить повторювані значення.
  • 🔢 Вбудовані локальні переменні: Такі властивості, як $index, $first та $last, доступні всередині кожної ітерації для нумерації та стилізації.
  • ⚠️ Статус підтримки: Життєвий цикл AngularJS завершився 31 грудня 2021 року та не отримує подальших патчів безпеки.
Детальніше

Директива ng-repeat в AngularJS

Директива ng-repeat в AngularJS

Команда ng-повтор директива У AngularJS використовується для відображення повторюваних значень, визначених у контролері. Іноді нам потрібно показати список елементів у представленні, і ng-repeat відображає список, визначений у контролері, на сторінці представлення.

⚠️ Повідомлення служби підтримки: Досягнуто AngularJS кінець терміну служби 31 грудня 2021 року і не отримує подальших виправлень чи виправлень безпеки. Наведена нижче директива залишається актуальною для підтримки існуючих програм AngularJS 1.x; у сучасних Angular еквівалентом є *ngFor структурна директива.

Приклад директиви AngularJS ng-repeat

Давайте розглянемо приклад директиви ng-repeat в AngularJS:

Директива ng-repeat в AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/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 controllers do from Angular's perspective" },
            { name: "Controller Methods" },
            { name: "Building a basic controller" }
        ];
    });
</script>

</body>
</html>

Code Пояснення:

  1. Перейдіть на вкладку контролер, ми спочатку визначаємо масив елементів списку, які будуть відображатися у поданні. Тут масив під назвою TopicNames містить три елементи, кожен з яких є парою ім'я-значення.
  2. Масив присвоюється безпосередньо $scope.TopicNames, що робить його доступним для представлення, пов'язаного з цим контролером.
  3. Теги HTML <ul> (невпорядкований список) та <li> (елемент списку) відображає елементи. Директива ng-repeat перебирає кожен елемент масиву та tpname — локальна змінна, що містить поточний елемент, отже {{tpname.name}} виводить його властивість name.

⚠️ Виправлення: У початковому поясненні зазначалося, що масив був «доданий до змінної-члена під назвою topics«. У коді такої змінної не існує — масив присвоюється безпосередньо $scope.TopicNames, на яке посилається представлення. Введення тут другої назви є поширеною причиною порожнього списку.

Якщо код виконано успішно, у браузері відобразиться наступний вивід.

Директива ng-repeat в AngularJS

Кілька контролерів AngularJS

Раніше ми бачили один контролер, в якому один метод обробляв як додавання, так і віднімання.tracєднання чисел. Натомість можна використовувати кілька контролерів для чіткішого розділення логіки. Наприклад, один контролер може працювати з числами, а інший — з рядками.

Розглянемо приклад визначення кількох контролерів у застосунку AngularJS.

Кілька контролерів AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/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>

Code Пояснення:

  1. Визначено два контролери, firstcontroller та secondcontrollerКожен приєднує змінну до своєї власної сфера: pname у першому, lname у другому.
  2. У поданні другий контролер вкладено в перший, а вираз має вигляд lname з внутрішньої області видимості. Оскільки вкладений контролер успадковує від свого батьківського елемента, {{pname}} також вирішило б це питання — успадкування йде вниз, а не вгору.

Якщо код виконано успішно, текст другийконтролер відображається.

Кілька контролерів AngularJS

СТАТТІ ПО ТЕМІ

Як використовувати track за допомогою ng-повтору

Найпоширеніша помилка ng-repeat — це помилка Duplicates in a repeater are not allowedВін з'являється в момент, коли колекція містить одне й те саме значення двічі, і повністю зупиняє рендеринг списку.

Причина — ідентичність tracкороль. AngularJS потрібен стабільний ключ для кожного елемента, щоб він міг повторно використовувати вузли DOM, а не перебудовувати їх при кожному дайджесті. За замовчуванням він використовує саме значення елемента, тому два однакові значення конфліктують.

<!-- Fails: the value 2 appears twice -->
<li ng-repeat="n in [1, 2, 2, 3]">{{n}}</li>

<!-- Works: position is unique even when values repeat -->
<li ng-repeat="n in [1, 2, 2, 3] track by $index">{{n}}</li>

<!-- Best for records from a server: track by a real identifier -->
<li ng-repeat="topic in TopicNames track by topic.id">{{topic.name}}</li>

Вибір між двома формами важливіший, ніж здається на перший погляд. Tracking by $index завжди вирішує помилку, оскільки позиція унікальна за визначенням, але вона пов'язує кожен вузол DOM зі слотом, а не із записом. Зміна порядку або фільтрація колекції потім повторно використовує неправильні вузли, що відображається як поля введення keeping текст попереднього рядка.

Tracking за допомогою справжнього ідентифікатора, такого як topic.id повністю уникає цього. AngularJS може відстежувати кожен запис під час його переміщення, тому він змінює порядок існуючих вузлів замість того, щоб знищувати та перебудовувати їх. У довгих списках це також значно швидше, оскільки повторний рендеринг торкається лише рядків, які фактично змінилися. Використовуйте $index лише для масивів простих значень, які ніколи не змінюють порядок.

Спеціальні властивості, доступні всередині ng-repeat

Кожна ітерація ng-repeat надає кілька властивостей лише для читання у власній дочірній області видимості. Вони описують, де знаходиться поточний елемент у колекції, що охоплює нумерацію, стилі чергування та роздільники без додавання додаткового стану до контролера.

властивість тип значення
$index Номер Позиція поточного елемента, починаючи з 0
$first Boolean Правда лише для першого елемента
$last Boolean Правда лише для останнього пункту
$middle Boolean Істинне для кожного елемента, який не є ні першим, ні останнім
$even Boolean Істина, коли $index парний
$odd Boolean Істина, коли $index непарне значення

Типове використання поєднує їх з ng-класом для зебристих смуг.ping, як в ng-class="{'row-alt': $odd}"або за допомогою ng-if для відображення роздільника в кожному рядку, окрім останнього, записаного ng-if="!$last"Відображення номера рядка, зрозумілого людиною, відбувається просто {{$index + 1}}, оскільки індекс починається з нуля. Усі шість властивостей перераховуються автоматично щоразу, коли колекція змінюється, тому нічого не потрібно перераховувати вручну.

Поширені помилки ng-repeat та як їх виправити

Більшість проблем ng-repeat виникають через дублікати значень, успадкування області видимості або через директиву, розташовану на неправильному елементі. Кожен симптом нижче вказує свою причину.

  • Дублікати в ретрансляторі не допускаються: колекція містить повторюване значення. Додати track by $index, або краще, track by унікальна власність.
  • Список нічого не відображає: Назва у поданні не збігається з властивістю в області видимості. Виведіть колекцію за допомогою {{TopicNames}} щоб підтвердити його прибуття.
  • Кожен елемент повторюється, включаючи обгортку: ng-repeat було розміщено на контейнері, а не на елементі. Перемістіть його до <li> or <tr>.
  • Редагування введених даних змінює неправильний рядок: список є tracкед $index під час перевпорядкування елементів. Track натомість стабільним ідентифікатором.
  • Зміни всередині циклу не зберігаються: кожна ітерація має власну дочірню область видимості, тому запис у примітив створює локальну копію. Запис у властивість об'єкта, таку як item.done.

Поширені запитання

Так, використовуючи ng-repeat="(key, value) in myObject"Зверніть увагу, що AngularJS ітерує ключі об'єктів у відсортованому порядку, а не в порядку вставки, тому масив безпечніший, коли важлива послідовність.

Ланцюгові фільтри у виразі, як у ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Оригінальний масив залишається незмінним; змінюється лише порядок відображення та підмножина.

Так. AI інструменти зіставляють ng-repeat з *ngFor та track від до tracФункції kBy. Уважно перевірте фільтри, оскільки Angular навмисно видалив вбудовані канали фільтра та orderBy.

Інструменти штучного інтелекту виявляють виклики функцій всередині виразу repeat, які повторно виконуються при кожному дайджесті, та відсутні tracРечення k by, які примушують до повного перебудовування DOM. Обидва є звичайними причинами повільної роботи списку.

Скористайтеся формою коментарів, ng-repeat-start та ng-repeat-end, який повторює ряд споріднених елементів. Це важливо в таблицях, де зайвий div порушить розмітку.

Підсумуйте цей пост за допомогою: