AngularJS Untuk Loop dengan Angka & Kisaran

Angular memang menyediakan beberapa dukungan untuk loop menggunakan angka-angka dalam arahan HTML-nya:

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

Tetapi jika variabel lingkup Anda mencakup rentang yang memiliki angka dinamis maka Anda harus membuat array kosong setiap kali.

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 berfungsi, tetapi itu tidak perlu karena kita tidak akan menggunakan array jangkauan sama sekali dalam loop. Apakah ada yang tahu pengaturan rentang atau reguler untuk nilai min / maks?

Sesuatu seperti:

<div data-ng-repeat="i in 1 .. 100">
  do something
</div>

Saya tweak jawaban ini sedikit dan muncul dengan biola ini .

Filter didefinisikan sebagai:

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

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };
});

Dengan pengulangan yang digunakan seperti ini:

<div ng-repeat="n in [] | range:100">
  do something
</div>

Saya datang dengan versi yang lebih sederhana, untuk membuat rentang antara dua angka yang ditentukan, misalnya. 5 hingga 15

Lihat demo di JSFiddle

HTML :

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

Pengendali :

$scope.range = function(min, max, step) {
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step) {
        input.push(i);
    }
    return input;
};

Hanya Javascript biasa (Anda bahkan tidak perlu controller):

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

Sangat berguna saat mockuping

Saya datang dengan sintaks yang sedikit berbeda yang cocok untuk saya sedikit lebih dan menambahkan batas bawah opsional juga:

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 <= highBound; i++)
                result.push(i);
            return result;
        };
    });

yang dapat Anda gunakan sebagai

<div ng-repeat="n in [10] | makeRange">Do something 0..9: {{n}}</div>

atau

<div ng-repeat="n in [20, 29] | makeRange">Do something 20..29: {{n}}</div>

Bagi mereka yang baru menggunakan angular. Indeks bisa didapat dengan menggunakan $ index.

Sebagai contoh:

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

Yang mana, ketika Anda menggunakan filter praktis Gloopy, cetak:
lakukan sesuatu nomor 0
lakukan sesuatu nomor 1
lakukan sesuatu nomor 2
lakukan sesuatu nomor 3
lakukan sesuatu nomor 5
lakukan sesuatu nomor 5
lakukan sesuatu nomor 6
lakukan sesuatu nomor 7
lakukan sesuatu nomor 8
lakukan sesuatu nomor 9

Cara singkat untuk melakukan ini adalah dengan menggunakan metode _.range () Underscore.js. :)

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>

Saya menggunakan ng-repeat-rangearahan khusus saya :

/**
 * 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 <= to)
                    array[array.length] = from += step;

                return array;
            }

            // prepare range options
            var from = scope.from || 0;
            var step = scope.step || 1;
            var to   = scope.to || attrs.ngRepeatRange;

            // get range of numbers, convert to the string and add ng-repeat
            var rangeString = range(from, to + 1, step).join(',');
            angular.element(element).attr('ng-repeat', 'n in [' + rangeString + ']');
            angular.element(element).removeAttr('ng-repeat-range');

            $compile(element)(scope);
        }
    };
}]);

dan kode html adalah

<div ng-repeat-range from="0" to="20" step="5">
    Hello 4 times!
</div>

atau sederhana

<div ng-repeat-range from="5" to="10">
    Hello 5 times!
</div>

atau bahkan sederhana

<div ng-repeat-range to="3">
    Hello 3 times!
</div>

atau hanya

<div ng-repeat-range="7">
    Hello 7 times!
</div>

Solusi tanpa kode paling sederhana adalah init array dengan range, dan gunakan $ index + betapapun saya ingin mengimbangi dengan:

<select ng-init="(_Array = []).length = 5;">
    <option ng-repeat="i in _Array track by $index">{{$index+5}}</option>
</select>

Definisi metode

Kode di bawah ini mendefinisikan metode yang range()tersedia untuk seluruh ruang lingkup aplikasi Anda MyApp. Perilakunya sangat mirip dengan range()metode Python .

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<max; value+=step) {
            output.push(value);
        }
        // returning the generated array
        return output;
    };
}]);

Pemakaian

Dengan satu parameter:

<span ng-repeat="i in range(3)">{{ i }}, </span>

0, 1, 2,

Dengan dua parameter:

<span ng-repeat="i in range(1, 5)">{{ i }}, </span>

1, 2, 3, 4,

Dengan tiga parameter:

<span ng-repeat="i in range(-2, .7, .5)">{{ i }}, </span>

-2, -1.5, -1, -0.5, 0, 0.5,

Anda dapat menggunakan filter 'setelah' atau 'sebelum' dalam modul angular.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

Tanpa perubahan pada pengontrol Anda, Anda dapat menggunakan ini:

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

Nikmati!

Jawaban terpendek: 2 baris kode

JS (di pengontrol AngularJS Anda)

$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 myCountjumlah bintang yang seharusnya muncul di lokasi ini.

Kamu bisa memakai $index untuk operasi pelacakan apa pun. Misalnya jika Anda ingin mencetak beberapa mutasi pada indeks, Anda dapat memasukkan yang berikut ini di div:

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

Menggunakan UnderscoreJS:

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

Menerapkan ini untuk $rootScopemembuatnya tersedia di mana-mana:

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

Sangat sederhana:

$scope.totalPages = new Array(10);

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

Hai, Anda dapat mencapainya menggunakan html murni menggunakan AngularJS (TIDAK diperlukan Instruksi!)

<div ng-app="myapp" ng-controller="YourCtrl" ng-init="x=[5];">
  <div ng-if="i>0" ng-repeat="i in x">
    <!-- this content will repeat for 5 times. -->
    <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>

Atur Lingkup di pengontrol

var range = [];
for(var i=20;i<=70;i++) {
  range.push(i);
}
$scope.driverAges = range;

Atur Ulangi di File Template Html

<select type="text" class="form-control" name="driver_age" id="driver_age">
     <option ng-repeat="age in driverAges" value="{{age}}">{{age}}</option>
</select>

Perbaikan untuk solusi @ Mormegil

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 <= max; i++) result.push(i);
    if (range[0] > range[1]) result.reverse();
    return result;
  };
});

pemakaian

<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

Saya mencoba yang berikut ini dan berhasil baik untuk saya:

<md-radio-button ng-repeat="position in formInput.arrayOfChoices.slice(0,6)" value="{{position}}">{{position}}</md-radio-button>

Sudut 1.3.6

Terlambat ke pesta. Tetapi akhirnya saya hanya melakukan ini:

Di controller Anda:

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

Html:

<select ng-model="myRange">
    <option>3</option>
    <option>5</option>
</select>

<div ng-repeat="i in repeater(myRange)"></div>

Ini adalah jawaban yang ditingkatkan jzm (saya tidak bisa berkomentar lain saya akan mengomentari jawabannya karena ia termasuk kesalahan). Fungsi ini memiliki nilai rentang awal / akhir, jadi lebih fleksibel, dan ... berfungsi. Kasus khusus ini untuk hari bulan:

$scope.rangeCreator = function (minVal, maxVal) {
    var arr = [];
   for (var i = minVal; i <= maxVal; i++) {
      arr.push(i);
   }
   return arr;
};


<div class="col-sm-1">
    <select ng-model="monthDays">
        <option ng-repeat="day in rangeCreator(1,31)">{{day}}</option>
    </select>
</div>

Saya menyiapkan ini dan melihatnya mungkin bermanfaat bagi sebagian orang. (Ya, CoffeeScript. Sue me.)

Pengarahan

app.directive 'times', ->
  link: (scope, element, attrs) ->
    repeater = element.html()
    scope.$watch attrs.times, (value) ->
      element.html ''
      return unless value?
      element.html Array(value + 1).join(repeater)

Menggunakan:

HTML

<div times="customer.conversations_count">
  <i class="icon-picture></i>
</div>

Bisakah ini menjadi lebih sederhana?

Saya khawatir tentang filter karena Angular suka mengevaluasi ulang tanpa alasan yang baik sepanjang waktu, dan ini merupakan hambatan besar jika Anda memiliki ribuan filter seperti yang saya lakukan.

Arahan ini bahkan akan mengawasi perubahan dalam model Anda, dan memperbarui elemen yang sesuai.

<div ng-init="avatars = [{id : 0}]; flag = true ">
  <div ng-repeat='data in avatars' ng-if="avatars.length < 10 || flag"
       ng-init="avatars.length != 10 ? avatars.push({id : $index+1}) : ''; flag = avatars.length <= 10 ? true : false">
    <img ng-src="http://actual-names.com/wp-content/uploads/2016/01/sanskrit-baby-girl-names-400x275.jpg">
  </div>
</div>

Jika Anda ingin mencapai ini dalam html tanpa pengontrol atau pabrik.

Misalkan $scope.refernceurlarray

for(var i=0; i<$scope.refernceurl.length; i++){
    $scope.urls+=$scope.refernceurl[i].link+",";
}

Ini adalah varian paling sederhana: cukup gunakan array bilangan bulat ....

 <li ng-repeat="n in [1,2,3,4,5]">test {{n}}</li>