어레이 상에서 반복하지 않고 정의된 횟수만큼 ng-repeat하는 방법

어레이 상에서 반복하지 않고 정의된 횟수만큼 ng-repeat하는 방법

ng-repeat어레이에 대해 항상 반복할 필요 없이 정의된 횟수만큼만 사용할 수 있습니다.

를 들어,는 목록 . 예를 들어, 목록 항목은 5회 표시되어야 합니다.$scope.number 때문에 각 1 2, 3, 4 5로 합니다. 1, 2, 3, 4, 5로 합니다.

원하는 결과:

<ul>
   <li><span>1</span></li>
   <li><span>2</span></li>
   <li><span>3</span></li>
   <li><span>4</span></li>
   <li><span>5</span></li>
</ul>

갱신(2018년 9월 25일)

새로운 버전의 AngularJS(>= 1.3.0)에서는 변수(함수 필요 없음)만으로 이 작업을 수행할 수 있습니다.

<li ng-repeat="x in [].constructor(number) track by $index">
    <span>{{ $index+1 }}</span>
</li>

$scope.number = 5;

처음 질문을 받았을 때는 이것이 가능하지 않았다.이 업데이트에 대한 아래의 답변에서 @Nikhil Nambiar의 공로를 인정합니다.

---

오리지널(2013년 5월 29일)

이 순간은 ㅇㅇㅇㅇㅇ입니다.ng-repeat는 모음을 할 수 .

<li ng-repeat="i in getNumber(number)">
    <span>{{ $index+1 }}</span>
</li>

또한 컨트롤러의 어딘가에 있습니다.

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);   
}

하면 " " " " 를 할 수 있습니다.$scope.number원하는 만큼 자유롭게 사용할 수 있고 원하는 구속력을 유지할 수 있습니다.

EDIT(2014년 1월 6일) -- 새로운 버전의 AngularJS(>= 1.1.5)는track by $index:

<li ng-repeat="i in getNumber(number) track by $index">
    <span>{{ $index+1 }}</span>
</li>

여기 같은 것을 사용하는 몇 개의 리스트가 있습니다.getNumber★★★★★★ 。

다음과 같이 할 수 있습니다.

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>

다음은 이 작업을 수행하는 방법의 예입니다.ng-documents:http://jsfiddle.net/digitalzebra/wnWY6/의 코멘트에서 영감을 받았습니다.

ng-repeat 디렉티브에 주의해 주세요.

<div ng-app>
    <div ng-controller="TestCtrl">
        <div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
    </div>
</div>

컨트롤러는 다음과 같습니다.

function TestCtrl($scope) {
    $scope.range = function(n) {
        return new Array(n);
    };
};

이 스레드의 jsFiddle이 당신이 찾고 있는 것 같습니다.

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | limitTo:2">
       {{item.name}}
   </div>
</div>

보다 간단한 접근방식은 다음과 같습니다(예: 5회).

<div ng-repeat="x in [].constructor(5) track by $index">
       ...
</div>

저도 같은 문제에 부딪혔어요.나는 우연히 이 실마리를 찾았지만, 그들이 여기서 하는 방법이 마음에 들지 않았다.솔루션에서는 이미 설치한 underscore.js를 사용하고 있었습니다.간단한 것은 다음과 같습니다.

<ul>
    <li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>

이게 바로 네가 원하는 걸 할 수 있을 거야.

html을 최소한으로 유지하고 싶었기 때문에 다른 사용자가 그랬던 것처럼 배열[0,1,2,...]을 생성하는 작은 필터를 정의했습니다.

angular.module('awesomeApp')
  .filter('range', function(){
    return function(n) {
      var res = [];
      for (var i = 0; i < n; i++) {
        res.push(i);
      }
      return res;
    };
  });

그 후 뷰에서 다음과 같이 사용할 수 있습니다.

<ul>
  <li ng-repeat="i in 5 | range">
    {{i+1}} <!-- the array will range from 0 to 4 -->
  </li>
</ul>

이것은 정말 못생겼지만 정수 또는 변수 중 하나에 대해 컨트롤러 없이 작동합니다.

정수:

<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>

변수:

<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>

이렇게 하는 방법은 여러 가지가 있습니다.컨트롤러에 로직이 있는 것이 귀찮아서 요소를 n번 반복하는 문제를 해결하기 위한 간단한 지시문을 작성했습니다.

설치:

할 수 .bower install angular-repeat-n

예:

<span ng-repeat-n="4">{{$index}}</span

★★★★★1234

또한 스코프 변수를 사용하여 작동합니다.

<span ng-repeat-n="repeatNum"></span>

출처:

깃헙

이는 승인된 답변의 일부에 불과하지만 새로운 기능을 만들 필요는 없습니다.범위에서 '어레이'를 Import하는 경우에만:

<div ng-app="myapp">
    <div ng-controller="ctrlParent">
        <ul>
            <li ng-repeat="i in counter(5) track by $index">
              <span>{{$index+1}}</span></li>
        </ul>
    </div>
</div>

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.myNumber = 5;
    $scope.counter = Array;
});

실제 예시는 이 바이올린을 참조하십시오.

가장 쉬운 답변: 코드 2줄

JS(각도로)JS 컨트롤러)

$scope.range = new Array(MAX_REPEATS); // set MAX_REPEATS to the most repetitions you will ever need in a single ng-repeat that makes use of this strategy

HTML

<div ng-repeat="i in range.slice(0,repeatCount) track by $index"></div>

서...어디에repeatCount는 이 위치에 표시되는 반복 횟수입니다.

angular는 slice라는 매우 달콤한 기능을 준다.이를 통해 원하는 것을 달성할 수 있습니다. 예: ng-slice="ab in abc.slice(startIndex, endIndex)"

이 데모 : http://jsfiddle.net/sahilosheal/LurcV/39/ 에서는, 이 「생활의 편리화」기능의 사용법을 설명합니다.:)

html:

<div class="div" ng-app >
    <div ng-controller="Main">
        <h2>sliced list(conditional NG-repeat)</h2>
        <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>
        <h2>unsliced list( no conditional NG-repeat)</h2>
         <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>

    </div>

CSS:

ul
{
list-style: none;
}
.div{
    padding:25px;
}
li{
    background:#d4d4d4;
    color:#052349;
}

ng-JS:

 function ctrlParent ($scope) {
    $scope.abc = [
     { "name": "What we do", url: "/Home/AboutUs" },
     { "name": "Photo Gallery", url: "/home/gallery" },
     { "name": "What we work", url: "/Home/AboutUs" },
     { "name": "Photo play", url: "/home/gallery" },
     { "name": "Where", url: "/Home/AboutUs" },
     { "name": "playground", url: "/home/gallery" },
     { "name": "What we score", url: "/Home/AboutUs" },
     { "name": "awesome", url: "/home/gallery" },
     { "name": "oscar", url: "/Home/AboutUs" },
     { "name": "american hustle", url: "/home/gallery" }
    ];
}
function Main($scope){
    $scope.items = [{sort: 1, name: 'First'}, 
                    {sort: 2, name: 'Second'}, 
                    {sort: 3, name: 'Third'}, 
                    {sort: 4, name:'Last'}];
    }

각도 1.2.x에 대한 답변입니다.

, .ng-repeat

<li ng-repeat="i in getNumber(myNumber) track by $index">

다음은 바이올린입니다.http://jsfiddle.net/cHQLH/153/

각도 1.2는 지시어에 중복된 값을 허용하지 않기 때문입니다.이것은, 다음의 조작을 실시하려고 하면 에러가 발생한다는 것을 의미합니다.

<li ng-repeat="x in [1,1,1]"></li>

.ng-if합니다.ng-repeat

따라서 num이 요소를 반복해야 하는 횟수인 경우:

<li ng-repeat="item in list" ng-if="$index < num">

CoffeeScript 를 사용하는 사용자의 경우 범위 이해를 사용할 수 있습니다.

지시.

link: (scope, element, attrs) ->
  scope.range = [1..+attrs.range]

또는 컨트롤러

$scope.range = [1..+$someVariable]
$scope.range = [1..5] # Or just an integer

템플릿

<div ng-repeat="i in range">[ the rest of your code ]</div>

Ivan의 첫 번째 답변에 대한 비트를 확장하면 문장의 트랙이 없는 컬렉션으로 문자열을 사용할 수 있으므로, 사용 사례가 (질문에서와 같이) 10개 미만일 경우 다음과 같이 합니다.

<ul>
   <li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>

좀 젠키하긴 하지만 보기엔 충분히 단순하고 특별히 혼란스럽지도 않아요

이 예를 사용할 수 있습니다.

내부 컨트롤러:

$scope.data = {
    'myVal': 33,
    'maxVal': 55,
    'indexCount': function(count) {
        var cnt = 10;
        if (typeof count === 'number') {
            cnt = count;
        }
        return new Array(cnt);
    }
};

HTML 코드측의 select 요소의 예:

<select ng-model="data.myVal" value="{{ data.myVal }}">
    <option ng-repeat="i in data.indexCount(data.maxVal) track by $index" value="{{ $index + 1 }}">{{ $index + 1 }}</option>
</select>

먼저 LoDash를 사용하여 각도 필터를 만듭니다.

angular.module('myApp').filter('times', function(){
   return function(value){
      return _.times(value || 0);
   }
});

LoDash times 함수는 null, defined, 0, 숫자 및 숫자의 문자열 표현을 처리할 수 있습니다.

그런 다음 HTML에서 다음과 같이 사용합니다.

<span ng-repeat="i in 5 | times">
 <!--DO STUFF-->
</span>

또는

<span ng-repeat="i in myVar | times">
 <!--DO STUFF-->
</span>

및 2021 버전

*ngFor="let x of [].constructor(number)"

Angular는 컬렉션을 수정하기 위한 필터를 제공합니다.이 경우 수집은 늘(예: [])이 되며 필터는 다음과 같이 인수도 받습니다.

<div id="demo">
    <ul>
        <li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li>
    </ul>
</div>

JS:

module.filter('fixedNumber', function() {
    return function(emptyarray, number) {
        return Array(number);
    }
});

module.controller('myCtrl', ['$scope', function($scope) {
    $scope.number = 5;
}]);

이 방법은 위에서 제안한 방법과 매우 유사하며 반드시 우수한 것은 아니지만 Angular에서 필터의 힘을 보여줍니다.JS.

n이 너무 높지 않은 경우 n개의 문자열과 함께 split("")을 사용할 수도 있습니다.

<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>

같은 문제가 발생했기 때문에 다음과 같은 결과가 나왔습니다.

(function () {
  angular
    .module('app')
    .directive('repeatTimes', repeatTimes);

  function repeatTimes ($window, $compile) {
    return { link: link };

    function link (scope, element, attrs) {
      var times    = scope.$eval(attrs.repeatTimes),
          template = element.clone().removeAttr('repeat-times');

      $window._(times).times(function (i) {
        var _scope = angular.extend(scope.$new(), { '$index': i });
        var html = $compile(template.clone())(_scope);

        html.insertBefore(element);
      });

      element.remove();
    }
  }
})();

...및 html:

<div repeat-times="4">{{ $index }}</div>

라이브 예시

언더스코어 사용했어요.times프로젝트에서 이미 사용하고 있는 것처럼 기능하지만 네이티브 코드로 쉽게 대체할 수 있습니다.

나는 반복 횟수를 늘릴 수 있는 보다 역동적인 해결책이 필요했다.

HTML

<div ng-repeat="n in newUserCount">
<input type="text" value="" name="newuser{{n}}"/>
</div>

복제기 제어

<span class="helper" ng-click="duplicateUser()">
Create another user with the same permissions
</span>

JS

 $scope.newUserCount = Array('1');
var primaryValue = 1;
$scope.duplicateUser = function()
{
    primaryValue++;
    $scope.newUserCount.push(primaryValue)
}

다른 ng-repeat에서 최대수가 나오는 재사용 가능한 디렉티브를 만들고 있습니다.그래서, 이것은 가장 잘 투표된 답변에 대한 편집입니다.

컨트롤러의 코드를 다음과 같이 변경하기만 하면 됩니다.

$scope.getNumber = function(num) {
    var temp = [];
    for(var j = 0; j < num; j++){
        temp.push(j)
    }
    return temp; 
}

지정된 반복 횟수를 가진 새 어레이가 반환됩니다.

문자열 위에 반복되므로 각 문자에 대한 항목을 렌더링합니다.

<li ng-repeat = "k in 'aaaa' track by $index">
   {{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
</li>

이 못생겼지만 코드 없는 회피책을 사용할 수 있습니다.number|n decimal places네이티브 필터

 <li ng-repeat="k in (0|number:mynumber -2 ) track by $index">
    {{$index}}
 </li>

이렇게 하면mynumber추가 코드 없이 요소를 지정합니다.말합니다'0.000'.
사용하고 있습니다mynumber - 2보상하다0.
3 이하의 수치에서는 사용할 수 없지만 경우에 따라서는 도움이 될 수 있습니다.

$scope.number = 5;

<div ng-repeat="n in [] | range:$scope.number">
      <span>{{$index}}</span>
</div>

간단한 방법:

    public defaultCompetences: Array<number> = [1, 2, 3];

컴포넌트/컨트롤러에 삽입한 후 다음을 수행합니다.

    <div ng-repeat="i in $ctrl.defaultCompetences track by $index">

이 코드는 내 타이프스크립트 프로젝트에서 가져온 것이지만 순수 자바스크립트로 재배열될 수 있습니다.

언급URL : https://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array