Angular ngRepeat 按索引跟蹤

1. 在 AngularJS 中按 $index 跟蹤
2. 在 AngularJS 中通過 $index 使用 Track

本文幫助你瞭解 $index 的 ngRepeat 跟蹤，並在你的 Angular 應用程式中使用它。

在 AngularJS 中按 $index 跟蹤

Angular 是一個具有許多內建功能的現代 JavaScript 框架。AngularJS 提供雙向資料繫結，這意味著對模型所做的任何更改都會反映在檢視中，反之亦然。

它還提供 ngRepeat，它為陣列或物件中的每個專案重複 DOM 元素。 $index 的 ngRepeat 軌道允許你使用它們的索引號指定應該重複哪些專案。

ngRepeat 是一個可以新增到 Angular 應用程式的 HTML 模板中的指令。它用於建立列表，並且可以將表示式作為引數。

ngRepeat 表示式有兩個引數：一個變數名和這個變數名的值。

然後迭代這些變數，每次迭代都被一一分配給變數。問題是 ngRepeat 不會為最近顯示的物件重建 DOM 元件。

我們使用 $index 的軌道來克服這個問題。

$index 的 ngRepeat 軌道為列表中的每個專案提供唯一識別符號。

當你想要訪問列表中的特定專案或當你擁有一組物件並需要訪問這些物件中的屬性時，此識別符號會很有幫助；這是非常有益的。

$index 指令的跟蹤工作如下。

1. 它為同一父級的所有子級分配相同的索引。
2. 如果父級沒有為其子級指定索引，它會分配從 0 開始的連續整數。
3. 如果指令已經指定了子項，則不會為其子項建立新索引。

在 AngularJS 中通過 $index 使用 Track

本節通過示例說明如何在你的 Angular 應用程式中通過 $index 使用 Angular 跟蹤。

使用以下命令建立一個新專案。

ng new angular-track-by-index

在 app 資料夾中新增以下 JavaScript 程式碼。

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

我們在 JavaScript 程式碼中使用了 $scope，那麼 $scope 是什麼？在 AngularJS 中，$scope 是一個包含應用程式資料和操作的內建物件。

你可以將屬性新增到控制器函式中的 $scope 物件，並將值或函式應用於它們。

$scope 充當控制器和檢視 (HTML) 之間的連結。它將資訊從控制器傳送到檢視。

新增以下 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>

在本文中，我們已經看到 $index 的 ngRepeat 軌道是 Angular 的基本功能之一，它允許開發人員遍歷陣列併為陣列中的每個專案呈現相同的 HTML。

使用此指令，開發人員可以輕鬆地為任何 HTML 列表建立可重用的模板。

點選這裡檢視上述程式碼的演示。