Có cách nào để ng-repeatxác định số lần thay vì luôn phải lặp lại trên một mảng không?

Ví dụ: bên dưới tôi muốn mục danh sách hiển thị 5 lần với giả sử $scope.numberbằng 5 ngoài ra tăng số lượng để mỗi mục danh sách tăng như 1, 2, 3, 4, 5

Kết quả như ý:

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

Cập nhật (25/9/2018)

Các phiên bản mới hơn của AngularJS (> = 1.3.0) cho phép bạn thực hiện việc này chỉ với một biến (không cần chức năng):

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

$scope.number = 5;

Điều này là không thể tại thời điểm câu hỏi đầu tiên được hỏi. Tín dụng cho @Nikhil Nambiar từ câu trả lời của anh ấy bên dưới cho bản cập nhật này

Bản gốc (29/5/2013)

Hiện tại, ng-repeatchỉ chấp nhận một bộ sưu tập làm tham số, nhưng bạn có thể làm điều này:

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

Và một nơi nào đó trong bộ điều khiển của bạn:

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

Điều này sẽ cho phép bạn thay đổi $scope.numberthành bất kỳ số nào bạn muốn và vẫn duy trì ràng buộc mà bạn đang tìm kiếm.

EDIT (1/6/2014) - Các phiên bản mới hơn của AngularJS (> = 1.1.5) yêu cầu track by $index:

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

Dưới đây là một câu đố với một vài danh sách sử dụng cùng getNumberchức năng.

bạn có thể làm được việc này:

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

Dưới đây là một ví dụ về cách bạn có thể làm điều này. Lưu ý rằng tôi đã được truyền cảm hứng bởi một nhận xét trong các tài liệu lặp lại: http://jsfiddle.net/digitalzebra/wnWY6/

Lưu ý chỉ thị ng-repeat:

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

Đây là bộ điều khiển:

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

Tôi nghĩ rằng jsFiddle từ chủ đề này có thể là những gì bạn đang tìm kiếm.

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

Một cách tiếp cận đơn giản hơn sẽ là (ví dụ 5 lần):

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

Tôi gặp vấn đề tương tự. Tôi đã xem qua chủ đề này, nhưng không thích các phương pháp họ có ở đây. Giải pháp của tôi là sử dụng underscore.js mà chúng tôi đã cài đặt. Nó đơn giản như thế này:

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

Điều này sẽ làm chính xác những gì bạn đang tìm kiếm.

Tôi muốn giữ cho html của mình rất tối thiểu, vì vậy đã xác định một bộ lọc nhỏ tạo ra mảng [0,1,2, ...] như những người khác đã làm:

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

Sau đó, trên khung nhìn có thể sử dụng như thế này:

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

Đây thực sự là UGLY, nhưng nó hoạt động mà không có bộ điều khiển cho số nguyên hoặc biến:

số nguyên:

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

Biến đổi:

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

Có rất nhiều cách để làm điều này. Tôi thực sự bận tâm khi có logic trong bộ điều khiển của mình vì vậy tôi đã tạo ra một lệnh đơn giản để giải quyết vấn đề lặp lại một phần tử n lần.

Cài đặt:

Lệnh có thể được cài đặt bằng bower install angular-repeat-n

Thí dụ:

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

sản xuất: 1234

Nó cũng hoạt động bằng cách sử dụng một biến phạm vi:

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

Nguồn:

Github

Đây chỉ là một biến thể nhỏ trong câu trả lời được chấp nhận, nhưng bạn không thực sự cần phải tạo một chức năng mới . Chỉ để nhập 'Mảng' trong phạm vi:

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

Xem fiddle này cho một ví dụ trực tiếp.

Câu trả lời dễ nhất: 2 dòng mã

JS (trong bộ điều khiển AngularJS của bạn)

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

... Đâu repeatCountlà số lần lặp lại sẽ xuất hiện ở vị trí này.

angular cho một chức năng rất ngọt gọi là lát .. sử dụng cái này bạn có thể đạt được những gì bạn đang tìm kiếm. ví dụ: ng-repeat = "ab in abc.slice (start Index, end Index)"

bản demo này: http://jsfiddle.net/sahilosheal/LurcV/39/ sẽ giúp bạn ra ngoài và cho bạn biết cách sử dụng chức năng "làm cho cuộc sống dễ dàng" này. :)

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

Đây là một câu trả lời cho góc 1.2.x

Về cơ bản là như vậy, với sự sửa đổi nhỏ của ng-repeat

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

đây là câu đố: http://jsfiddle.net/cHQLH/153/

điều này là do góc 1,2 không cho phép các giá trị trùng lặp trong lệnh. Điều này có nghĩa là nếu bạn đang cố gắng làm như sau, bạn sẽ gặp lỗi.

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

Bạn có thể sử dụng ng-ifchỉ thị vớing-repeat

Vì vậy, nếu num là số lần bạn cần phần tử được lặp lại:

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

Bạn có thể sử dụng ví dụ này.

Bộ điều khiển bên trong:

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

Ví dụ cho phần tử được chọn ở phía mã 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>

Đối với người dùng sử dụng CoffeeScript, bạn có thể sử dụng phạm vi hiểu:

Chỉ thị

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

hoặc Bộ điều khiển

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

Bản mẫu

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

Mở rộng một chút về câu trả lời đầu tiên của Ivan một chút, bạn có thể sử dụng một chuỗi làm bộ sưu tập mà không cần theo dõi bằng câu lệnh miễn là các ký tự là duy nhất, vì vậy nếu trường hợp sử dụng ít hơn 10 số như câu hỏi tôi chỉ cần làm :

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

Đó là một chút jenky, chắc chắn, nhưng đủ đơn giản để xem xét và không đặc biệt khó hiểu.

Đầu tiên, tạo bộ lọc góc bằng LoDash:

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

Hàm thời gian LoDash có khả năng xử lý null, không xác định, 0, số và biểu diễn chuỗi số.

Sau đó, sử dụng nó trong HTML của bạn như sau:

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

hoặc là

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

Tôi cần một giải pháp năng động hơn cho vấn đề này - nơi tôi có thể tăng lặp lại.

HTML

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

Kiểm soát sao chép

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

Mã não

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

Angular cung cấp các bộ lọc để sửa đổi một bộ sưu tập. Trong trường hợp này, bộ sưu tập sẽ là null, tức là [] và bộ lọc cũng lấy các đối số, như sau:

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

Phương pháp này rất giống với các phương pháp được đề xuất ở trên và không nhất thiết phải vượt trội nhưng cho thấy sức mạnh của các bộ lọc trong AngularJS.

Nếu n không quá cao, một tùy chọn khác có thể là sử dụng split ('') với một chuỗi n ký tự:

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

Tôi đã gặp vấn đề tương tự và đây là những gì tôi đã đưa ra:

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

... và html:

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

VÍ DỤ SỐNG

Tôi đã sử dụng timeschức năng gạch dưới như chúng tôi đã sử dụng nó trong dự án, nhưng bạn có thể dễ dàng thay thế nó bằng mã gốc.

Tôi đang tạo một chỉ thị có thể sử dụng lại trong đó số tối đa sẽ đến từ một lần lặp lại khác. Vì vậy, đây là một chỉnh sửa trên câu trả lời bình chọn tốt nhất.

Chỉ cần thay đổi mã tại bộ điều khiển này -

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

Điều này sẽ trả về một mảng mới với số lần lặp được chỉ định

kể từ khi lặp qua một chuỗi, nó sẽ hiển thị một mục cho mỗi char:

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

chúng ta có thể sử dụng cách giải quyết xấu xí nhưng không có mã này bằng number|n decimal placesbộ lọc riêng.

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

bằng cách này, chúng ta sẽ có mynumbercác phần tử không có thêm mã. Nói '0.000'.
Chúng tôi sử dụng mynumber - 2để bù lại 0.
Nó sẽ không hoạt động cho các số dưới 3, nhưng có thể hữu ích trong một số trường hợp.

$scope.number = 5;

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

cách đơn giản:

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

trong thành phần / bộ điều khiển và sau đó:

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

Mã này là từ dự án bản thảo của tôi nhưng có thể được sắp xếp lại thành javascript thuần