AngularJS Untuk Loop dengan Angka & Rentang

Sudut tidak memberikan beberapa dukungan untuk loop untuk menggunakan angka-angka dalam HTML arahan:

<div data-ng-repeat="i in [1,2,3,4,5]">
  do something
</div>

Tapi jika anda lingkup variabel mencakup rentang yang memiliki sejumlah dinamis maka anda akan perlu untuk membuat array kosong setiap waktu.

Di controller

var range = [];
for(var i=0;i<total;i++) {
  range.push(i);
}
$scope.range = range;

Dalam HTML

<div data-ng-repeat="i in range">
  do something
</div>

Ini bekerja, tapi hal ini tidak perlu karena kita tidak't dapat menggunakan berbagai fasilitas di dalam loop. Apakah ada yang tahu dari pengaturan range atau biasa untuk min/max nilai?

Sesuatu seperti:

<div data-ng-repeat="i in 1 .. 100">
  do something
</div>
Mengomentari pertanyaan (1)
Larutan

Saya tweak [jawaban ini][1] sedikit dan datang dengan [ini biola][2].

Filter didefinisikan sebagai:


var myApp = angular.module('myApp', []);
myApp.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i
Komentar (9)

Saya datang dengan versi lebih sederhana, untuk menciptakan jarak antara dua didefinisikan angka, misalnya. 5 sampai 15

[Lihat demo di JSFiddle][1]

HTML:

<ul>
    <li ng-repeat="n in range(5,15)">Number {{n}}</li>
</ul>

Kontrol:


$scope.range = function(min, max, step) {
    step = step || 1;
    var input = [];
    for (var i = min; i 
Komentar (5)

Apa-apa tapi biasa Javascript (anda don't bahkan perlu controller):

<div ng-repeat="n in [].constructor(10) track by $index">
    {{ $index }}
</div>

Sangat berguna ketika mockuping

Komentar (4)

Saya datang dengan sintaks yang sedikit berbeda yang cocok untuk saya sedikit lebih dan menambahkan opsional yang lebih rendah terikat serta:


myApp.filter('makeRange', function() {
        return function(input) {
            var lowBound, highBound;
            switch (input.length) {
            case 1:
                lowBound = 0;
                highBound = parseInt(input[0]) - 1;
                break;
            case 2:
                lowBound = parseInt(input[0]);
                highBound = parseInt(input[1]);
                break;
            default:
                return input;
            }
            var result = [];
            for (var i = lowBound; i 
Komentar (4)

Bagi mereka yang baru untuk angularjs. Indeks tersebut dapat diperoleh dengan menggunakan $index.

Misalnya:

<div ng-repeat="n in [] | range:10">
    do something number {{$index}}
</div>

Yang akan, bila anda're menggunakan Gloopy's berguna filter, cetak:
melakukan sesuatu yang nomor 0
melakukan sesuatu yang nomor 1
melakukan sesuatu yang nomor 2
melakukan sesuatu yang nomor 3
melakukan sesuatu yang nomor 4
melakukan sesuatu yang nomor 5
melakukan sesuatu yang nomor 6
melakukan sesuatu yang nomor 7
melakukan sesuatu yang nomor 8
melakukan sesuatu yang nomor 9

Komentar (3)

Pendek cara untuk melakukan ini adalah dengan menggunakan Garis bawah.js's _.range() metode. :)

http://underscorejs.org/#range

// declare in your controller or wrap _.range in a function that returns a dynamic range.
var range = _.range(1, 11);

// val will be each number in the array not the index.
<div ng-repeat='val in range'>
    {{ $index }}: {{ val }}
</div>
Komentar (6)

Saya menggunakan custom ng-repeat-range directive:


/**
 * Ng-Repeat implementation working with number ranges.
 *
 * @author Umed Khudoiberdiev
 */
angular.module('commonsMain').directive('ngRepeatRange', ['$compile', function ($compile) {
    return {
        replace: true,
        scope: { from: '=', to: '=', step: '=' },

        link: function (scope, element, attrs) {

            // returns an array with the range of numbers
            // you can use _.range instead if you use underscore
            function range(from, to, step) {
                var array = [];
                while (from + step 
Komentar (3)

Sederhana tidak ada kode solusi untuk init array dengan jangkauan, dan menggunakan $index + namun banyak hal yang ingin aku diimbangi dengan:


<select ng-init="(_Array = []).length = 5;">
    {{$index+5}}
Komentar (0)

Metode definisi

Kode di bawah ini mendefinisikan sebuah metode range() tersedia untuk seluruh lingkup dari aplikasi anda MyApp. Perilaku ini sangat mirip dengan Python [range()][1] metode.


angular.module('MyApp').run(['$rootScope', function($rootScope) {
    $rootScope.range = function(min, max, step) {
        // parameters validation for method overloading
        if (max == undefined) {
            max = min;
            min = 0;
        }
        step = Math.abs(step) || 1;
        if (min > max) {
            step = -step;
        }
        // building the array
        var output = [];
        for (var value=min; value
Komentar (0)

Anda dapat menggunakan 'setelah' atau 'sebelum' filter di sudut.modul filter (https://github.com/a8m/angular-filter)

$scope.list = [1,2,3,4,5,6,7,8,9,10]

HTML:

<li ng-repeat="i in list | after:4">
  {{ i }}
</li>

hasil: 5, 6, 7, 8, 9, 10

Komentar (0)

Tanpa ada perubahan pada controller anda, anda dapat menggunakan ini:

ng-repeat="_ in ((_ = []) && (_.length=51) && _) track by $index"

Nikmati!

Komentar (1)

Terpendek jawaban: 2 baris kode

JS (dalam AngularJS controller)

$scope.range = new Array(MAX_REPEATS); // MAX_REPEATS should be the most repetitions you will ever need in a single ng-repeat

HTML

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

...di mana myCount adalah jumlah bintang yang akan muncul di lokasi ini.

Anda dapat menggunakan $index untuk setiap pelacakan operasi. E. g. jika anda ingin mencetak beberapa mutasi pada indeks, anda mungkin menempatkan berikut di div:

{{ ($index + 1) * 0.5 }}
Komentar (0)

Hi anda dapat mencapai ini dengan menggunakan html murni menggunakan AngularJS (TIDAK ada Petunjuk yang diperlukan!)

<div ng-app="myapp" ng-controller="YourCtrl" ng-init="x=[5];">
  <div ng-if="i0" ng-repeat="i in x">

    <table class="table table-striped">
      <tr ng-repeat="person in people">
         <td>{{ person.first + ' ' + person.last }}</td>
      </tr>
    </table>
    <p ng-init="x.push(i-1)"></p>
  </div>
</div>
Komentar (0)

Sangat sederhana:

$scope.totalPages = new Array(10);

 <div id="pagination">
    <a ng-repeat="i in totalPages track by $index">
      {{$index+1}}
    </a>   
 </div> 
Komentar (0)

Menggunakan UnderscoreJS:

angular.module('myModule')
    .run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]);

Menerapkan ini ke $rootScope membuatnya tersedia di mana-mana:

<div ng-repeat="x in range(1,10)">
    {{x}}
</div>
Komentar (0)

Saya mencoba yang berikut ini dan itu bekerja dengan baik bagi saya:

{{position}}

Sudut 1.3.6

Komentar (0)

Peningkatan @Mormegil's solusi

app.filter('makeRange', function() {
  return function(inp) {
    var range = [+inp[1] && +inp[0] || 0, +inp[1] || +inp[0]];
    var min = Math.min(range[0], range[1]);
    var max = Math.max(range[0], range[1]);
    var result = [];
    for (var i = min; i  range[1]) result.reverse();
    return result;
  };
});

penggunaan

<span ng-repeat="n in [3, -3] | makeRange" ng-bind="n"></span>

3 2 1 0 -1 -2 -3

<span ng-repeat="n in [-3, 3] | makeRange" ng-bind="n"></span>

-3 -2 -1 0 1 2 3

<span ng-repeat="n in [3] | makeRange" ng-bind="n"></span>

0 1 2 3

<span ng-repeat="n in [-3] | makeRange" ng-bind="n"></span>

0 -1 -2 -3

Komentar (0)

Mengatur ruang Lingkup dalam controller


var range = [];
for(var i=20;i
Komentar (0)

Terlambat ke pesta. Tapi akhirnya aku hanya melakukan ini:

Di controller:

$scope.repeater = function (range) {
    var arr = []; 
    for (var i = 0; i < range; i++) {
        arr.push(i);
    }
    return arr;
}

Html:


<select ng-model="myRange">
    3
    5
Komentar (0)

Ini adalah jzm's peningkatan menjawab (saya tidak bisa komentar lagi saya akan komentar nya/jawaban-nya karena s/ia termasuk kesalahan). Fungsi memiliki start/end range nilai, sehingga's lebih fleksibel, dan... kerjanya. Kasus ini adalah untuk hari bulan ini:


$scope.rangeCreator = function (minVal, maxVal) {
    var arr = [];
   for (var i = minVal; i 
        {{day}}
Komentar (0)