インデックスによる Angular ngRepeat トラック

1. AngularJS の $index で追跡する
2. AngularJS で $index による追跡を使用する

この記事は、$index による ngRepeat トラックを理解し、Angular アプリケーションで使用するのに役立ちます。

AngularJS の $index で追跡する

Angular は、多くの組み込み機能を備えた最新の JavaScript フレームワークです。AngularJS は双方向のデータバインディングを提供します。つまり、モデルに加えられた変更はビューに反映され、その逆も同様です。

また、配列またはオブジェクト内のすべてのアイテムに対して DOM 要素を繰り返す ngRepeat も提供します。 $index による ngRepeat トラックでは、インデックス番号を使用して繰り返す必要のあるアイテムを指定できます。

ngRepeat は、Angular アプリケーションの HTML テンプレートに追加できるディレクティブです。リストの作成に使用され、引数として式をとることができます。

ngRepeat 式は、変数名とこの変数名の値の 2つのパラメーターを取ります。

次に、これらの変数が繰り返され、各反復が変数に 1つずつ割り当てられます。問題は、ngRepeat が最近表示されたオブジェクトの DOM コンポーネントを再構築しないことです。

この問題を解決するために、$index によるトラックを使用します。

$index による ngRepeat トラックは、リスト内の各アイテムに一意の識別子を提供します。

この識別子は、リスト内の特定のアイテムにアクセスする場合、またはオブジェクトの配列があり、それらのオブジェクト内のプロパティにアクセスする必要がある場合に役立ちます。これは非常に有益です。

$index ディレクティブによるトラックは次のように機能します。

1. 同じ親のすべての子に同じインデックスを割り当てます。
2. 親が子のインデックスを指定しない場合、0 から始まる連続した整数を割り当てます。
3. ディレクティブがすでに子を指定している場合、その子の新しいインデックスは作成されません。

AngularJS で $index による追跡を使用する

このセクションでは、例を使用して、Angular アプリで $index による Angular トラックを使用する方法を示します。

以下のコマンドで新しいプロジェクトを作成します。

ng new angular-track-by-index

次の JavaScript コードを app フォルダーに追加します。

 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 の重要な機能の 1つであり、開発者が配列を反復処理して、配列内の各アイテムに同じ HTML をレンダリングできることを確認しました。

このディレクティブを使用すると、開発者は任意の HTML リストの再利用可能なテンプレートを簡単に作成できます。

上記のコードのライブデモンストレーションを確認するには、ここをクリックしてください。