มีวิธีในการ ng-repeatการจำนวนครั้งที่กำหนดแทนที่จะต้องย้ำมากกว่าอาร์เรย์?

ตัวอย่างเช่นด้านล่างฉันต้องการให้รายการแสดงขึ้น 5 เท่าโดยสมมติว่า$scope.numberเท่ากับ 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>

อัปเดต (9/25/2018)

AngularJS รุ่นใหม่กว่า (> = 1.3.0) ให้คุณทำสิ่งนี้ได้ด้วยตัวแปร (ไม่จำเป็นต้องใช้ฟังก์ชั่น):

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

$scope.number = 5;

นี่เป็นไปไม่ได้ในเวลาที่คำถามถูกถามครั้งแรก ขอมอบเครดิตให้แก่ @Nikhil Nambiar จากคำตอบของเขาด้านล่างสำหรับการอัปเดตนี้

ต้นฉบับ (5/29/2013)

ในขณะนี้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เป็นหมายเลขใดก็ได้ตามที่คุณต้องการและยังคงมีผลผูกพันที่คุณต้องการ

แก้ไข (1/6/2014) - 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: 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>

นี่เป็น UGLY จริง ๆ แต่ทำงานได้โดยไม่มีตัวควบคุมสำหรับจำนวนเต็มหรือตัวแปร:

จำนวนเต็ม:

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

ตัวแปร:

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

มีหลายวิธีในการทำเช่นนี้ ฉันใส่ใจที่จะมีตรรกะในคอนโทรลเลอร์ของฉันดังนั้นฉันจึงสร้างคำสั่งง่ายๆเพื่อแก้ปัญหาการทำซ้ำองค์ประกอบ n-times

การติดตั้ง:

คำสั่งสามารถติดตั้งได้โดยใช้ bower install angular-repeat-n

ตัวอย่าง:

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

ผลิต: 1234

นอกจากนี้ยังทำงานโดยใช้ตัวแปรขอบเขต:

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

ที่มา:

Github

นี่เป็นเพียงการเปลี่ยนแปลงเล็กน้อยในคำตอบที่ยอมรับ แต่คุณไม่จำเป็นต้องสร้างฟังก์ชันใหม่ เพื่อนำเข้า 'Array' ในขอบเขตเท่านั้น:

<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 (ในตัวควบคุม AngularJS ของคุณ)

$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จำนวนครั้งที่ซ้ำควรปรากฏในตำแหน่งนี้

เชิงมุมให้ฟังก์ชั่นที่หวานมากเรียกว่าสไลซ์ .. การใช้สิ่งนี้คุณสามารถบรรลุสิ่งที่คุณกำลังมองหา เช่น ng-repeat = "ab ใน 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">

คุณสามารถใช้ตัวอย่างนี้

ภายในตัวควบคุม:

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

ตัวอย่างองค์ประกอบที่เลือกที่ด้านรหัส HTML:

<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>

สำหรับผู้ใช้ที่ใช้ 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>

ซึ่งเป็น jenky บิตแน่ใจ แต่ง่ายพอที่จะดูและไม่สับสนโดยเฉพาะ

ขั้นแรกให้สร้างตัวกรองเชิงมุมโดยใช้ LoDash:

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

ฟังก์ชัน LoDash times มีความสามารถในการจัดการค่า null, ไม่ได้กำหนด, 0, ตัวเลขและการแสดงสตริงของตัวเลข

จากนั้นใช้ใน HTML ของคุณตามนี้:

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

หรือ

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

ฉันต้องการวิธีแก้ปัญหาแบบไดนามิกที่มากขึ้น - ฉันสามารถเพิ่มการทำซ้ำได้ที่ไหน

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)
}

เชิงมุมมีตัวกรองเพื่อปรับเปลี่ยนคอลเลกชัน ในกรณีนี้การรวบรวมจะเป็นโมฆะเช่น [] และตัวกรองจะรับอาร์กิวเมนต์ดังนี้:

<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;
}]);

วิธีนี้คล้ายกับวิธีที่เสนอข้างต้นและไม่จำเป็นต้องดีกว่า แต่แสดงพลังของตัวกรองใน AngularJS

หาก n ไม่สูงเกินไปตัวเลือกอื่นอาจใช้ split ('') กับสตริงที่มีอักขระ n ตัว:

<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ฟังก์ชันขีดล่างเป็นตำแหน่งที่เราใช้มันในโครงการอยู่แล้ว แต่คุณสามารถแทนที่ได้ด้วยโค้ดเนทีฟ

ฉันกำลังสร้างคำสั่งนำมาใช้ซ้ำได้ซึ่งจำนวนสูงสุดจะมาจากอีก ng ซ้ำ ดังนั้นนี่คือการแก้ไขคำตอบที่โหวตที่สุด

เพียงแค่เปลี่ยนรหัสที่ตัวควบคุมเป็น -

$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">

รหัสนี้มาจากโครงการ typescript ของฉัน แต่สามารถจัดใหม่เป็นจาวาสคริปต์ที่บริสุทธิ์