Angular ngRepeat Pista por índice

1. Seguimiento por $index en AngularJS
2. Usar Seguimiento por $index en AngularJS

Este artículo lo ayuda a comprender la pista ngRepeat por $index y usarla en sus aplicaciones Angular.

Seguimiento por $index en AngularJS

Angular es un marco de JavaScript moderno con muchas funciones integradas. AngularJS proporciona enlace de datos bidireccional, lo que significa que cualquier cambio realizado en el modelo se reflejará en la vista y viceversa.

También proporciona ngRepeat, que repite elementos DOM para cada elemento de un array u objeto. La pista ngRepeat de $index le permite especificar qué elementos deben repetirse utilizando su número de índice.

El ngRepeat es una directiva que se puede agregar a la plantilla HTML de una aplicación Angular. Se utiliza para crear listas y puede tomar una expresión como argumento.

La expresión ngRepeat toma dos parámetros: un nombre de variable y un valor para este nombre de variable.

Luego, estas variables se iteran, y cada iteración se asigna a la variable una por una. El problema es que ngRepeat no reconstruirá los componentes DOM para los objetos mostrados recientemente.

Usamos la pista por $index para superar este problema.

La pista ngRepeat de $index proporciona un identificador único para cada elemento de la lista.

Este identificador puede ser útil cuando desea acceder a un elemento particular de la lista o cuando tiene un array de objetos y necesita acceder a las propiedades dentro de esos objetos; esto es increíblemente beneficioso.

La directiva track by $index funciona de la siguiente manera.

1. Asigna el mismo índice a todos los hijos del mismo padre.
2. Asigna enteros secuenciales a partir de 0 si el padre no especifica un índice para sus hijos.
3. La directiva no crea nuevos índices para sus hijos si ya los especifica.

Usar Seguimiento por $index en AngularJS

Esta sección muestra cómo usar la pista Angular por $index en su aplicación Angular con la ayuda de un ejemplo.

Cree un nuevo proyecto con el siguiente comando.

ng new angular-track-by-index

Agregue el siguiente código JavaScript en la carpeta de la aplicación.

 var app = angular.module('Adil',[]);
        app.controller('Demo',["$scope",function($scope){
            $scope.delft = [];
            $scope.add = function () {
                $scope.delft.push($scope.example );
            }
        }]);

Usamos $scope en el código JavaScript, entonces, ¿qué es $scope? En AngularJS, el $scope es un objeto integrado que contiene datos y operaciones de la aplicación.

Puede agregar atributos a un objeto $scope dentro de una función de controlador y aplicarles un valor o función.

El $scope sirve como enlace entre el controlador y la vista (HTML). Envía información desde el controlador a la vista.

Agregue el siguiente código HTML.

<h3>Example of Angular track by index</h3>
<p>Write anything in the box and press enter, you will understand the concept of Angular track by index</p>
<div ng-app="Adil">
  <div class="Demo" ng-controller="Demo">
    <form action="
               " ng-submit="add()">
      <input type="text" ng-model="example" />
    </form>
    <p ng-repeat="list in delft track by $index">{{list}}</p>
  </div>
</div>

En este artículo, hemos visto que la pista ngRepeat de $index es una de las características esenciales de Angular que permite a los desarrolladores iterar a través de un array y representar el mismo HTML para cada elemento de la matriz.

Con esta directiva, los desarrolladores pueden crear fácilmente una plantilla reutilizable para cualquier lista HTML.

Haga clic aquí para ver la demostración en vivo del código como se mencionó anteriormente.