[AngularJS] 지정한 횟수만큼 ng-repeat 사용

 

AngularJS를 사용하다보면 ng-repeat의 생각보다 복잡함을 느낄때가 있습니다. JSTL을 사용하던 때에는 내가 원하는 횟수만큼 EL문을 반복하는 기능을 손 쉽게 구현 가능했다면 ng-repeat으로 구현하기 위해서는 어떻게해야할지 감이 안왔죠. 물론 방법은 많아요. 그 중에서 간단한 방법 몇가지를 소개하려고 합니다.

 

---

 

Function (가장 간단한 방법)

$scope.getArray = function(num) {
    return new Array(num);
};

 

함수를 통해서 비어있는 배열을 만들어서 아래와같이 View 영역에서 ng-repeat 구문안에서 호출하여 사용하시면 됩니다.

 

AngularJS를 사용하다보면 ng-repeat의 생각보다 복잡함을 느낄때가 있습니다. JSTL을 사용하던 때에는 내가 원하는 횟수만큼 EL문을 반복하는 기능을 손 쉽게 구현 가능했다면 ng-repeat으로 구현하기 위해서는 어떻게해야할지 감이 안왔죠. 물론 방법은 많아요. 그 중에서 간단한 방법 몇가지를 소개하려고 합니다.

 

<ul>
    <li ng-repeat="i in getArray(num) track by $index"><span>Array {{$index+1}}</span></li>
</ul>

※ track by $index를 뒤에 붙여주지 않으면 Array를 new 키워드로 생성했기 때문에 구분자가 없어서 에러가 발생함. (2019. 06. 27 수정)

 

range Filter (이름은 자유롭게)

// 횟수 반큼 반복
app.filter('range', function() {
    return function(input, total) {
        total = parseInt(total);
        for (var i = 0; i < total; i++) {
            input.push(i);
        }
        return input;
    };
});

 

사용자가 원하는 횟수만큼 비어있는 배열을 만들어서 반환해주는 custom filter입니다. 위의 함수와 기능이 같지만 filter로 구현했다는 점에서 차이가 있는데요 filter는 다음과 같이 사용할 수 있습니다.

 

<ul>
    <li ng-repeat="i in [] | range : num"><span>Array {{$index+1}}</span></li>
</ul>