Cara ng-repeat didefinisikan beberapa kali, bukan berulang array?

Apakah ada cara untuk ng-repeat nomor ditetapkan kali bukan selalu harus iterate atas sebuah array?

Sebagai contoh, di bawah ini saya ingin daftar item untuk menampilkan hingga 5 kali dengan asumsi $scope.nomor sama dengan 5 selain incrementing nomor sehingga setiap item daftar bertahap seperti 1, 2, 3, 4, 5

Yang diinginkan:

<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>
Mengomentari pertanyaan (2)
Larutan

Pada saat ini, ng-repeat hanya menerima koleksi sebagai parameter, tetapi anda bisa melakukan hal ini:

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

Dan di suatu tempat di controller:

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

Ini akan memungkinkan anda untuk mengubah $scope.nomor untuk setiap nomor sebagai anda silahkan dan masih mempertahankan mengikat anda're looking for.

[Berikut ini adalah biola][1] dengan beberapa daftar menggunakan yang sama getNumber fungsi.

EDIT 1/6/2014: versi yang lebih Baru dari Sudut 1.x menggunakan sintaks berikut:

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

EDIT 9/25/2018: versi yang lebih Baru dari Sudut 1.x memungkinkan anda untuk melakukan hal ini tanpa fungsi. Jika kode anda lebih mudah dan anda don't perlu getNumber fungsi untuk alasan lain, sekarang anda dapat menghilangkan itu dan hanya melakukan ini:

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

Kredit untuk @Nikhil Nambiar dari jawaban di bawah ini untuk update ini

Komentar (15)

anda dapat melakukan ini:

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

Berikut ini adalah contoh bagaimana anda bisa melakukan hal ini. Perhatikan bahwa saya terinspirasi oleh komentar di ng-repeat docs: http://jsfiddle.net/digitalzebra/wnWY6/

Catatan ng-repeat directive:

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

Berikut ini adalah controller:

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

Saya pikir ini [jsFiddle][1] dari thread mungkin apa yang anda're looking for.

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

Pendekatan yang lebih sederhana akan sama (misalnya 5 kali):

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

Aku berlari ke dalam masalah yang sama. Saya datang di thread ini, tapi tidak't seperti metode yang mereka punya di sini. Solusi saya adalah menggunakan underscore.js yang kami sudah terpasang. It's sederhana seperti ini:

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

Ini akan melakukan persis apa yang anda're looking for.

Komentar (4)

Aku ingin menjaga html saya sangat minim, sehingga didefinisikan filter kecil yang menciptakan array [0,1,2,...] seperti yang telah dilakukan orang lain:

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

Setelah itu, pada tampilan ini dimungkinkan untuk menggunakan seperti ini:

<ul>
  <li ng-repeat="i in 5 | range">
    {{i+1}} 
  </li>
</ul>
Komentar (1)

Ini adalah benar-benar JELEK, tetapi bekerja tanpa controller baik untuk integer atau variabel:

integer:

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

variabel:

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

Ada banyak cara untuk melakukan hal ini. Saya benar-benar terganggu karena logika saya controller sehingga aku dibuat sederhana direktif untuk memecahkan masalah mengulangi unsur n-kali.

Instalasi:

Direktif dapat diinstal dengan menggunakan bower install sudut-ulangi-n

Contoh:


<span ng-repeat-n="4">{{$index}}
Komentar (1)

Ini hanya sedikit variasi pada jawaban yang diterima, tapi anda don't benar-benar perlu untuk membuat baru fungsi. Hanya untuk impor 'Array' dalam lingkup:

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

Lihat [biola ini][1]. untuk contoh hidup.

Komentar (1)

Jawaban termudah: 2 baris kode

JS (dalam AngularJS controller)

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

...di mana repeatCount adalah jumlah pengulangan yang harus muncul di lokasi ini.

Komentar (4)

sudut memberikan tampilan yang sangat manis fungsi yang disebut slice.. menggunakan ini, anda dapat mencapai apa yang anda cari. misalnya ng-repeat="ab di abc.slice(startIndex,endIndex)"

demo ini :http://jsfiddle.net/sahilosheal/LurcV/39/ akan membantu anda keluar dan memberitahu anda bagaimana untuk menggunakan ini "untuk membuat hidup mudah" fungsi. :)

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'}];
    }
Komentar (0)

Heres jawaban untuk sudut 1.2.x

Pada dasarnya itu adalah sama, dengan sedikit modifikasi dari ng-repeat

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

berikut ini adalah biola: http://jsfiddle.net/cHQLH/153/

hal ini karena sudut 1.2 doesn't membiarkan nilai-nilai duplikat di directive. Ini berarti jika anda mencoba untuk melakukan hal berikut, anda akan mendapatkan error.

<li ng-repeat="x in [1,1,1]"></li>
Komentar (0)

Anda dapat menggunakan ng-jika direktif dengan ng-repeat

Jadi, jika num adalah jumlah kali anda membutuhkan elemen yang berulang-ulang:

<li ng-repeat="item in list" ng-if="$index  num">
Komentar (1)

Memperluas sedikit pada Ivan's jawaban pertama sedikit, anda dapat menggunakan string sebagai koleksi tanpa lagu dengan pernyataan begitu lama sebagai karakter yang unik, sehingga jika penggunaan-kasus kurang dari 10 angka seperti pertanyaan saya hanya akan melakukan:

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

Yang sedikit jenky, yakin, tapi cukup sederhana untuk melihat dan tidak terlalu membingungkan.

Komentar (0)

Anda dapat menggunakan contoh ini.

Di dalam controller:

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

Contoh untuk memilih elemen pada HTML sisi:


<select ng-model="data.myVal" value="{{ data.myVal }}">
    {{ $index + 1 }}
Komentar (0)

Untuk pengguna yang menggunakan CoffeeScript, anda dapat menggunakan berbagai pemahaman:

Direktif

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

atau Controller

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

Template

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

Pertama, buat sebuah sudut filter menggunakan LoDash:

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

Yang LoDash kali fungsi ini mampu menangani null, undefined, 0, angka, dan representasi string dari angka-angka.

Kemudian, gunakan di HTML seperti ini:

<span ng-repeat="i in 5 | times">

</span>

atau

<span ng-repeat="i in myVar | times">

</span>
Komentar (0)

Jika n tidak terlalu tinggi, pilihan lain bisa menggunakan split('') dengan string n karakter :

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

Sudut menyediakan filter untuk memodifikasi sebuah koleksi. Dalam hal ini koleksi akan menjadi nol, yaitu [], dan filter juga membutuhkan argumen, sebagai berikut:

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

Metode ini sangat mirip dengan yang diusulkan di atas dan isn't selalu lebih unggul tetapi menunjukkan kekuatan filter di AngularJS.

Komentar (0)