Direktiva AngularJS ng-repeat s příkladem

Od: James Hartman James Hartman
Hours aktualizováno

⚡ Chytré shrnutí

Direktiva ng-repeat v AngularJS vykreslí jednu kopii elementu pro každou položku v kolekci definované v rozsahu kontroleru. Promění pole v seznam, tabulku nebo jakýkoli opakující se kód bez nutnosti ručního psaní smyčky.

  • 🔁 Základní chování: ng-repeat klonuje svůj hostitelský element jednou pro každou položku, takže direktiva patří k opakujícímu se elementu, nikoli k jeho kontejneru.
  • ???? ️ Proměnná smyčky: Název před slovem `in` se stane lokálním aliasem pro aktuální položku uvnitř daného klonu.
  • 🧬 Rozsah dítěte: Každá iterace má svůj vlastní podřízený rozsah, a proto přiřazení primitiva uvnitř smyčky nedosáhne rodiče.
  • 🔑 Identita Tracking: A tracVýraz k říká AngularJS, jak identifikovat položky, a je vyžadován, když kolekce obsahuje opakované hodnoty.
  • 🔢 Vestavěné lokální proměnné: Vlastnosti jako $index, $first a $last jsou k dispozici uvnitř každé iterace pro číslování a stylování.
  • ⚠️ Stav podpory: Podpora AngularJS skončila 31. prosince 2021 a neobdrží žádné další bezpečnostní záplaty.
Přečíst více

Direktiva ng-repeat v AngularJS

ng-repeat směrnice v AngularJS

Jedno ng-opakovat Směrnice V AngularJS se používá k zobrazení opakujících se hodnot definovaných v kontroleru. Někdy potřebujeme zobrazit seznam položek v zobrazení a ng-repeat vykreslí seznam definovaný v kontroleru na stránku zobrazení.

⚠️ Oznámení podpory: AngularJS dosaženo konec životnosti k 31. prosinci 2021 a neobdrží žádné další záplaty ani bezpečnostní opravy. Níže uvedená směrnice zůstává platná pro údržbu stávajících aplikací AngularJS 1.x; v moderních ANGULAR ekvivalent je *ngFor strukturální směrnice.

Příklad směrnice AngularJS ng-repeat

Podívejme se na příklad direktivy ng-repeat v AngularJS:

ng-repeat směrnice v 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 Vysvětlení:

  1. v kontrolor, nejprve definujeme pole položek seznamu, které se mají zobrazit v pohledu. Zde pole s názvem TopicNames obsahuje tři položky, každou z nich jako pár název-hodnota.
  2. Pole je přiřazeno přímo k $scope.TopicNames, což jej zpřístupní pohledu vázanému na tento kontroleru.
  3. HTML tagy <ul> (neuspořádaný seznam) a <li> (položka seznamu) zobrazí položky. Direktiva ng-repeat iteruje přes každou položku v poli a tpname je lokální proměnná obsahující aktuální položku, takže {{tpname.name}} vypíše jeho vlastnost name.

⚠️ Oprava: Původní vysvětlení uvádělo, že pole bylo „přidáno k členské proměnné s názvem topics„. V kódu žádná taková proměnná neexistuje – pole je přiřazeno přímo k $scope.TopicNames, což je název, na který se pohled odkazuje. Zavedení druhého názvu je častou příčinou prázdného seznamu.

Pokud je kód úspěšně spuštěn, zobrazí se v prohlížeči následující výstup.

ng-repeat směrnice v AngularJS

Vícenásobné ovladače AngularJS

Dříve jsme viděli jeden kontroler, ve kterém jedna metoda zpracovávala sčítání i odčítání.tracrozdělení čísel. Místo toho můžete použít více kontrolérů pro čistší oddělení logiky. Například jeden kontrolér může pracovat s čísly, zatímco jiný s řetězci.

Podívejme se na příklad definování více kontrolerů v aplikaci AngularJS.

Vícenásobné ovladače 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 Vysvětlení:

  1. Jsou definovány dva řadiče, firstcontroller a secondcontrollerKaždý připojuje proměnnou ke své vlastní rozsah: pname v prvním, lname ve druhém.
  2. V pohledu je druhý kontroler vnořený uvnitř prvního a výraz zní lname z vnitřního rozsahu. Protože vnořený kontroler dědí od svého rodiče, {{pname}} by se zde také vyřešilo – dědičnost plyne směrem dolů, nikdy směrem nahoru.

Pokud je kód úspěšně spuštěn, text druhý řídicí jednotka je zobrazen.

Vícenásobné ovladače AngularJS

SOUVISEJÍCÍ ČLÁNKY

Jak používat track pomocí ng-opakování

Nejčastějším selháním ng-repeat je chyba Duplicates in a repeater are not allowedObjeví se v okamžiku, kdy kolekce obsahuje dvakrát stejnou hodnotu, a zcela zastaví vykreslování seznamu.

Příčinou je identita trackrál. AngularJS potřebuje pro každou položku stabilní klíč, aby mohl znovu používat uzly DOM, a ne je znovu sestavovat při každém digestování. Ve výchozím nastavení používá samotnou hodnotu položky, takže se dvě identické hodnoty kolidují.

<!-- 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>

Výběr mezi těmito dvěma formami je důležitější, než se na první pohled zdá. Tracking by $index vždy vyřeší chybu, protože pozice je ze své podstaty jedinečná, ale každý uzel DOM je vázán na slot, nikoli na záznam. Změna pořadí nebo filtrování kolekce pak znovu použije nesprávné uzly, které se zobrazí jako vstupní pole keeping text předchozího řádku.

Tracking skutečným identifikátorem, jako například topic.id Tomu se zcela vyhne. AngularJS dokáže sledovat každý záznam při jeho pohybu, takže mění pořadí existujících uzlů, místo aby je ničil a znovu sestavoval. U dlouhých seznamů je to také výrazně rychlejší, protože opětovné vykreslení se dotkne pouze řádků, které se skutečně změnily. Použijte $index pouze pro pole prostých hodnot, která se nikdy neuspořádají.

Speciální vlastnosti dostupné uvnitř ng-repeat

Každá iterace ng-repeat zpřístupňuje několik vlastností pouze pro čtení ve svém vlastním podřízeném oboru. Ty popisují, kde se aktuální položka v kolekci nachází, což zahrnuje číslování, střídání stylů a oddělovače, aniž by se do kontroleru přidával jakýkoli další stav.

Vlastnictví Typ Hodnota
$index Číslo Pozice aktuální položky, počínaje od 0
$first Boolean Platí pouze pro první položku
$last Boolean Platí pouze pro poslední položku
$middle Boolean Platí pro každou položku, která není ani první, ani poslední
$even Boolean Pravda, pokud je $index sudý
$odd Boolean Pravda, pokud je $index lichý

Typické použití je kombinuje s ng-class pro zebra strips.ping, jako v ng-class="{'row-alt': $odd}", nebo pomocí ng-if pro vykreslení oddělovače na každém řádku kromě posledního, zapsaného ng-if="!$last"Zobrazení čísla řádku čitelného pro člověka je jednoduše {{$index + 1}}, protože index je založen na nule. Všech šest vlastností se automaticky přepočítává při každé změně kolekce, takže nic není třeba přepočítávat ručně.

Časté chyby ng-repeat a jak je opravit

Většina problémů s ng-repeat pramení z duplicitních hodnot, dědění rozsahu platnosti nebo z direktivy umístěné na nesprávném elementu. Každý níže uvedený příznak pojmenovává svou příčinu.

  • Duplikáty v opakovači nejsou povoleny: Kolekce obsahuje opakující se hodnotu. Přidat track by $index, nebo lépe, track by unikátní nemovitost.
  • Seznam nic nevykresluje: Název v zobrazení neodpovídá vlastnosti v oboru. Vytiskněte kolekci pomocí {{TopicNames}} aby se potvrdilo, že dorazilo.
  • Každý prvek se opakuje, včetně obalovacího elementu: Příkaz ng-repeat byl umístěn na kontejner, nikoli na položku. Přesuňte ho do <li> or <tr>.
  • Úprava vstupu změní nesprávný řádek: seznam je trackladen $index zatímco se položky mění pořadí. Track stabilním identifikátorem.
  • Změny uvnitř smyčky se neukládají: Každá iterace má svůj vlastní podřízený obor, takže zápis do primitiva vytváří lokální kopii. Zápis do vlastnosti objektu, například item.done.

Nejčastější dotazy

Ano, pomocí ng-repeat="(key, value) in myObject"V AngularJS iterují klíče objektů v seřazeném pořadí, nikoli v pořadí vkládání, takže pole je bezpečnější, když na pořadí záleží.

Řetězové filtry ve výrazu, jako v ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Původní pole zůstává nedotčeno; mění se pouze vykreslené pořadí a podmnožina.

Ano. AI nástroje mapují ng-repeat na *ngFor a track od do tracFunkce kBy. Pečlivě zkontrolujte filtry, protože Angular záměrně vynechal vestavěný filtr a orderBy pipes.

Nástroje umělé inteligence rozpoznávají volání funkcí uvnitř výrazu repeat, která se znovu spouštějí při každém digestování, a chybí. tracKlauzule k by, které vynucují úplné přestavby DOMu. Obojí je obvyklou příčinou pomalého seznamu.

Použijte formulář pro komentáře, ng-repeat-start a ng-repeat-end, který opakuje řadu sourozeneckých prvků. To je důležité v tabulkách, kde by další div narušil kódování.

Shrňte tento příspěvek takto: