인덱스별 Angular ngRepeat 추적

1. AngularJS에서 $index로 추적
2. AngularJS에서 $index로 Track 사용

이 기사는 $index의 ngRepeat 트랙을 이해하고 Angular 애플리케이션에서 사용하는 데 도움이 됩니다.

AngularJS에서 $index로 추적

Angular는 많은 기능이 내장된 최신 JavaScript 프레임워크입니다. AngularJS는 양방향 데이터 바인딩을 제공합니다. 즉, 모델에 대한 모든 변경 사항이 뷰에 반영되고 그 반대의 경우도 마찬가지입니다.

또한 배열 또는 개체의 모든 항목에 대해 DOM 요소를 반복하는 ngRepeat도 제공합니다. $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

앱 폴더에 다음 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 트랙은 개발자가 배열을 반복하고 배열의 각 항목에 대해 동일한 HTML을 렌더링할 수 있도록 하는 Angular의 필수 기능 중 하나임을 확인했습니다.

이 지시문을 사용하면 개발자는 모든 HTML 목록에 대해 재사용 가능한 템플릿을 쉽게 만들 수 있습니다.

여기를 클릭 위에서 언급한 코드의 라이브 데모를 확인하십시오.