AngularJS => ng-repeat

Introduktion

Direktivet ngRepeat instanserar en mall en gång per artikel från en samling. Samlingen måste vara en matris eller ett objekt. Varje mallinstans får sitt eget räckvidd, där den givna slingvariabeln är inställd på det aktuella samlingsobjektet och $index ställs in på objektindex eller nyckel.

Syntax

<element ng-repeat="expression"></element>
<div ng-repeat="(key, value) in myObj">...</div>
<div ng-repeat="variable in expression">...</div>

parametrar

Variabel	detaljer
`$index`	antal iteratorförskjutning av det upprepade elementet (0.längd-1)
`$first`	boolean true om det upprepade elementet är först i iteratorn.
`$middle`	boolean true om det upprepade elementet är mellan det första och det sista i iteratorn.
`$last`	boolean true om det upprepade elementet är sist i iteratorn.
`$even`	boolean true om iterator position `$index` är jämnt (annars falskt).
`$odd`	boolean true om iterator position `$index` är udda (annars falskt).

Anmärkningar

AngularJS tillhandahåller dessa parametrar som specialvariabler som är tillgängliga i ng-repetitionsuttrycket och var som helst inuti HTML-taggen som ng-repetitionen lever på.

Iterera över objektegenskaper

<div ng-repeat="(key, value) in myObj"> ... </div>

Till exempel

<div ng-repeat="n in [42, 42, 43, 43]">
  {{n}}
</div>

Spårning och duplikat

ngRepeat använder $ watchCollection för att upptäcka förändringar i samlingen. När en förändring sker, gör ngRepeat sedan motsvarande ändringar i DOM:

När ett objekt läggs till läggs en ny instans av mallen till DOM.
När ett objekt tas bort tas dess mallinstans bort från DOM.
När objekt sorteras om, omordnas deras respektive mallar i DOM.

dubbletter

track by för alla listor som kan inkludera duplicerade värden.
track by också påskyndar listförändringar betydligt.
Om du inte använder track by i det här fallet får du felet: [ngRepeat:dupes]

$scope.numbers = ['1','1','2','3','4'];

<ul>
  <li ng-repeat="n in numbers track by $index">
    {{n}}
  </li>
</ul>

ng-repetera-start + ng-repetera-slut

AngularJS 1,2 ng-repeat hantera flera element med ng-repeat-start och ng-repeat-end :

// table items
$scope.tableItems = [
    {
        row1: 'Item 1: Row 1',
        row2: 'Item 1: Row 2'
    },
    {
        row1: 'Item 2: Row 1',
        row2: 'Item 2: Row 2'
    }
];

// template
<table>
    <th>
        <td>Items</td>
    </th>
    <tr ng-repeat-start="item in tableItems">
        <td ng-bind="item.row1"></td>
    </tr>
    <tr ng-repeat-end>
        <td ng-bind="item.row2"></td>
    </tr>
</table>

Produktion:

artiklar
Punkt 1: rad 1
Punkt 1: rad 2
Punkt 2: rad 1
Punkt 2: rad 2

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

AngularJS
ng-repeat

Sök…