AngularJS ng-upprepa direktiv med exempel

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

Direktivet ng-repeat i AngularJS renderar en kopia av ett element för varje objekt i en samling som definierats i controllerns scope. Det omvandlar en array till en lista, en tabell eller någon repeterande markup utan att skriva en manuell loop.

  • 🔁 Kärnbeteende: ng-repeat klonar sitt värdelement en gång per objekt, så direktivet hör hemma på elementet som upprepas, inte dess container.
  • 🏷️ Loopvariabel: Namnet före ordet in blir ett lokalt alias för det aktuella objektet inuti den klonen.
  • 🧬 Underordnat omfattning: Varje iteration får sitt eget underordnade scope, vilket är anledningen till att tilldelning av en primitiv inuti loopen inte når föräldern.
  • 🔑 Identitet Tracking: A track by expression talar om för AngularJS hur objekt identifieras, och det krävs när en samling innehåller upprepade värden.
  • 🔢 Inbyggda lokala funktioner: Egenskaper som $index, $first och $last är tillgängliga i varje iteration för numrering och formatering.
  • ⚠️ Supportstatus: AngularJS nådde slutet av sin livscykel den 31 december 2021 och får inga ytterligare säkerhetsuppdateringar.
Läs mer

AngularJS ng-repeat-direktivet

ng-repetera direktivet i AngularJS

Ocuco-landskapet ng-upprepa Direktiven I AngularJS används för att visa upprepade värden som definierats i kontrollenheten. Ibland behöver vi visa en lista med objekt i vyn, och ng-repeat renderar en lista som definierats i kontrollenheten på en vysida.

⚠️ Supportmeddelande: AngularJS nådde slut på livscykeln den 31 december 2021 och får inga ytterligare patchar eller säkerhetsfixar. Direktivet nedan förblir korrekt för underhåll av befintliga AngularJS 1.x-applikationer; i moderna Vinkel motsvarigheten är *ngFor strukturdirektiv.

AngularJS ng-repeat direktiv Exempel

Låt oss titta på ett exempel på ng-repeat-direktivet i AngularJS:

ng-repetera direktivet i 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 Förklaring:

  1. I styrenhet, definierar vi först arrayen med listobjekt som ska visas i vyn. Här en array som heter TopicNames innehåller tre objekt, vart och ett ett namn-värde-par.
  2. Matrisen är direkt tilldelad $scope.TopicNames, vilket gör den tillgänglig för vyn som är bunden till den här kontrollanten.
  3. HTML-taggarna <ul> (oordnad lista) och <li> (listobjekt) visar objekten. Direktivet ng-repeat itererar över varje post i arrayen, och tpname är den lokala variabeln som innehåller det aktuella objektet, så {{tpname.name}} skriver ut dess namnegenskap.

⚠️ Rättelse: Den ursprungliga förklaringen angav att arrayen "lades till en medlemsvariabel som heter topics". Ingen sådan variabel finns i koden — arrayen tilldelas direkt till $scope.TopicNames, vilket är namnet som vyn refererar till. Att introducera ett andra namn här är en vanlig orsak till en tom lista.

Om koden körs korrekt visas följande utdata i webbläsaren.

ng-repetera direktivet i AngularJS

AngularJS Multiple Controllers

Tidigare såg vi en enda regulator där en metod hanterade både addition och subtraction av tal. Du kan istället använda flera styrenheter för att separera logiken tydligare. Till exempel kan en styrenhet arbeta med tal medan en annan arbetar med strängar.

Låt oss titta på ett exempel på hur man definierar flera kontroller i en AngularJS-applikation.

AngularJS Multiple Controllers

<!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 Förklaring:

  1. Två styrenheter är definierade, firstcontroller och secondcontrollerVarje kopplar en variabel till sin egen omfattning: pname i det första, lname på sekunden.
  2. I vyn är den andra kontrollanten kapslad inuti den första, och uttrycket läser lname från det inre omfånget. Eftersom en kapslad kontroller ärver från sin förälder, {{pname}} skulle också lösas här — arvet flyter nedåt, aldrig uppåt.

Om koden körs korrekt, visas texten andrakontroller visas.

AngularJS Multiple Controllers

RELATERADE ARTIKLAR

Så här använder du track av med ng-upprepning

Det enskilt vanligaste ng-repeat-felet är felet Duplicates in a repeater are not allowedDet verkar som att i det ögonblick en samling innehåller samma värde två gånger, och det stoppar listrenderingen helt.

Orsaken är identitet trackung. AngularJS behöver en stabil nyckel för varje objekt så att den kan återanvända DOM-noder istället för att bygga om dem vid varje sammandrag. Som standard använder den själva objektvärdet, så två identiska värden kolliderar.

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

Att välja mellan de två formerna är viktigare än det först verkar. Tracking by $index löser alltid felet, eftersom en position per definition är unik, men den kopplar varje DOM-nod till en plats snarare än till en post. Om du ändrar ordning eller filtrerar samlingen återanvänds fel noder, vilket visas som inmatningsfält keeping föregående rads text.

Tracking med en äkta identifierare, såsom topic.id undviker det helt. AngularJS kan följa varje post när den flyttas, så den ordnar om befintliga noder istället för att förstöra och bygga om dem. På långa listor är detta också markant snabbare, eftersom en omrendering bara berör de rader som faktiskt ändrades. $index endast för arrayer med vanliga värden som aldrig ändrar ordning.

Specialegenskaper tillgängliga inuti ng-repeat

Varje iteration av ng-repeat exponerar flera skrivskyddade egenskaper på sitt eget underordnade omfång. De beskriver var det aktuella objektet finns inom samlingen, vilket täcker numrering, alternerande stilar och avgränsare utan att lägga till något extra tillstånd till kontrollenheten.

Fast egendom Typ Värderar
$index Antal Position för aktuellt objekt, med början vid 0
$first Boolean Sant endast för den första punkten
$last Boolean Sant endast för den sista punkten
$middle Boolean Sant för varje objekt som varken är först eller sist
$even Boolean Sant när $index är jämnt
$odd Boolean Sant när $index är udda

En typisk användning kombinerar dem med ng-klass för zebrastrimmorping, som i ng-class="{'row-alt': $odd}", eller med ng-if för att rendera en avgränsare på varje rad utom den sista, skriven ng-if="!$last"Att visa ett läsbart radnummer är helt enkelt {{$index + 1}}, eftersom indexet är nollbaserat. Alla sex egenskaper beräknas om automatiskt när samlingen ändras, så ingenting behöver beräknas om manuellt.

Vanliga ng-repeat-fel och hur man åtgärdar dem

De flesta ng-repeat-problem uppstår på grund av duplicerade värden, från arv av scope eller från att direktivet sitter på fel element. Varje symptom nedan anger dess orsak.

  • Dubbletter i en repeater är inte tillåtna: samlingen har ett upprepat värde. Lägg till track by $index, eller bättre, track by en unik egendom.
  • Listan visar ingenting: Namnet i vyn matchar inte egenskapen på omfånget. Skriv ut samlingen med {{TopicNames}} för att bekräfta att den anlänt.
  • Varje element upprepas, inklusive omslaget: ng-repeat placerades på behållaren istället för på objektet. Flytta den till <li> or <tr>.
  • Att redigera en inmatning ändrar fel rad: listan är tracked av $index medan varorna ombeställs. Track med en stabil identifierare istället.
  • Ändringar inom loopen behålls inte: varje iteration har sitt eget underordnade omfång, så att skriva till en primitiv skapar en lokal kopia. Skriv till en objektegenskap, till exempel item.done.

Vanliga frågor

Ja, använder ng-repeat="(key, value) in myObject"Observera att AngularJS itererar objektnycklar i sorterad ordning, inte i insättningsordning, så en array är säkrare när sekvensen spelar roll.

Kedjefilter i uttrycket, som i ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Den ursprungliga arrayen är orörd; endast den renderade ordningen och delmängden ändras.

Ja. AI verktygskart ng-repeat till *ngFor och track av till trackBy-funktioner. Kontrollera filtren noggrant, eftersom Angular avsiktligt tog bort det inbyggda filtret och orderBy-pipes.

AI-verktyg söker efter funktionsanrop inuti upprepningsuttrycket, som körs igen vid varje sammandrag, och saknas track by-klausuler som tvingar fram fullständiga DOM-ombyggnader. Båda är de vanliga orsakerna till en trög lista.

Använd kommentarsformuläret, ng-repeat-start och ng-repeat-end, vilket upprepar en rad syskonelement. Detta är viktigt i tabeller, där en extra div skulle bryta uppmärkningen.

Sammanfatta detta inlägg med: