Директива 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

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

⚠️ Уведомление службы поддержки: AngularJS достиг Прекращение поддержки 31 декабря 2021 года. и не получает дальнейших исправлений или обновлений безопасности. Приведенная ниже директива остается актуальной для поддержки существующих приложений AngularJS 1.x; в современных Угловой эквивалентом является *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}} выводит свойство имени.

⚠️ Исправление: В первоначальном объяснении говорилось, что массив был «добавлен в переменную-член, называемую 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>

<!-- лучших 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 привязывается к слоту, а не к записи. Переупорядочивание или фильтрация коллекции затем повторно использует неправильные узлы, что отображается как некорректное отображение полей ввода.ping текст предыдущей строки.

Tracking с помощью подлинного идентификатора, такого как topic.id Это позволяет полностью избежать подобных проблем. AngularJS может отслеживать каждую запись по мере её перемещения, поэтому он переупорядочивает существующие узлы вместо того, чтобы уничтожать и создавать их заново. На длинных списках это также значительно быстрее, поскольку повторная отрисовка затрагивает только те строки, которые фактически изменились. Используйте $index только для массивов простых значений, которые никогда не переупорядочиваются.

Особые возможности, доступные внутри ng-repeat

Каждая итерация ng-repeat предоставляет несколько свойств только для чтения в своей дочерней области видимости. Они описывают положение текущего элемента в коллекции, включая нумерацию, чередование стилей и разделители, без добавления какого-либо дополнительного состояния в контроллер.

Свойства Тип Значение
$index Номер регистрации Положение текущего элемента, начиная с 0.
$first Логический Это справедливо только для первого пункта.
$last Логический Это относится только к последнему товару.
$middle Логический Это верно для каждого элемента, который не является ни первым, ни последним.
$even Логический Верно, когда $index четное
$odd Логический Верно, когда $index нечетное значение

Типичный пример использования — сочетание их с ng-class для полосок зебры.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>.
  • При редактировании поля ввода изменяется не та строка: список tracked по $index пока товары переупорядочиваются. TracВместо этого используйте стабильный идентификатор для преобразования k в k.
  • Изменения внутри цикла не сохраняются: Каждая итерация имеет свою собственную дочернюю область видимости, поэтому запись в примитивный тип данных создает локальную копию. Запись в свойство объекта, например, item.done.

Часто задаваемые вопросы (FAQ)

Да, используя ng-repeat="(key, value) in myObject"Обратите внимание, что AngularJS перебирает ключи объектов в отсортированном порядке, а не в порядке добавления, поэтому массив безопаснее, когда важна последовательность.

Фильтры цепочки в выражении, как в ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Исходный массив остается неизменным; меняются только порядок отображения и подмножество элементов.

Да. AI Инструменты сопоставляют ng-repeat с *ngFor и tracк по к tracФункции kBy. Внимательно проверьте фильтры, поскольку Angular намеренно отказался от встроенных функций filter и orderBy.

Инструменты искусственного интеллекта обнаруживают вызовы функций внутри выражения repeat, которые повторяются при каждом обновлении, а также пропущенные вызовы. track с помощью условий, которые приводят к полной перестройке DOM. Оба варианта обычно являются причиной медленной работы списка.

Воспользуйтесь формой для комментариев. ng-repeat-start и ng-repeat-end, который повторяет ряд соседних элементов. Это важно в таблицах, где дополнительный div нарушит разметку.

Подведем итог этой публикации следующим образом: