wake-up-neo.com

AngularJS For Loop mit Zahlen und Bereichen

Angular bietet Unterstützung für eine for-Schleife, die Zahlen in den HTML-Anweisungen verwendet:

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

Wenn Ihre Bereichsvariable jedoch einen Bereich mit einer dynamischen Nummer enthält, müssen Sie jedes Mal ein leeres Array erstellen.

In der Steuerung

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

Im HTML

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

Dies funktioniert, ist jedoch nicht erforderlich, da wir das Bereichsarray in der Schleife überhaupt nicht verwenden. Kennt jemand die Einstellung eines Bereichs oder eines regulären Werts für Min/Max?

So etwas wie:

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

Ich habe diese Antwort ein bisschen gezwickt und diese Geige erfunden.

Filter definiert als:

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

Mit der Wiederholung wie folgt verwendet:

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

Ich habe mir eine noch einfachere Version ausgedacht, um einen Bereich zwischen zwei definierten Zahlen zu erstellen, z. 5 bis 15

Siehe Demo zu JSFiddle

HTML:

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

Controller :

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

Nichts als einfaches Javascript (Sie brauchen nicht einmal einen Controller):

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

Sehr nützlich beim Nachahmen

87
Maël Nison

Ich habe mir eine etwas andere Syntax ausgedacht, die etwas besser zu mir passt und optional auch eine Untergrenze hinzufügt:

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

welche du als

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

oder

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

Für Neulinge. Der Index kann mit $ index ermittelt werden.

Zum Beispiel:

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

Wenn Sie den praktischen Filter von Gloopy verwenden, können Sie Folgendes drucken:
mach etwas mit der Nummer 0
mach etwas Nummer 1
mach etwas Nummer 2
mach etwas Nummer 3
mach etwas Nummer 4
mach etwas Nummer 5
mach etwas Nummer 6
mach etwas Nummer 7
mach etwas Nummer 8
mach etwas Nummer 9

31
Arnoud Sietsema

Eine kurze Möglichkeit hierfür wäre die Verwendung der _.range () -Methode von 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>
21

Ich verwende meine benutzerdefinierte Anweisung ng-repeat-range:

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

und HTML-Code ist

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

oder einfach

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

oder auch einfach

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

oder nur

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

Am einfachsten war es keine Codelösung, ein Array mit dem Bereich zu initialisieren und den $ index + zu verwenden, wie oft ich dies ausgleichen möchte:

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

Methodendefinition

Der folgende Code definiert eine Methode range(), die für den gesamten Anwendungsbereich Ihrer Anwendung MyApp verfügbar ist. Sein Verhalten ist dem der Methode Python range() sehr ähnlich.

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

Verwendungszweck

Mit einem Parameter:

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

0, 1, 2,

Mit zwei Parametern:

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

1, 2, 3, 4,

Mit drei Parametern:

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

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

7
Mathieu Rodic

Ohne Änderungen an Ihrem Controller können Sie Folgendes verwenden:

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

Genießen!

6
odroz

Sie können 'after' oder 'before' Filter im angle.filter Modul verwenden ( 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>

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

6
a8m

Kürzeste Antwort: 2 Codezeilen

JS (in Ihrem 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>

... wobei myCount die Anzahl der Sterne ist, die an dieser Stelle erscheinen sollen.

Sie können $index für alle Verfolgungsvorgänge verwenden. Z.B. Wenn Sie eine Mutation auf den Index drucken möchten, können Sie Folgendes in das div einfügen:

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

UnderscoreJS verwenden:

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

Wenn Sie dies auf $rootScope anwenden, ist es überall verfügbar:

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

Hallo, Sie können dies mit reinem HTML mit AngularJS erreichen (KEINE Richtlinie erforderlich!)

<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>
2
Pavan Kosanam

Sehr einfach:

$scope.totalPages = new Array(10);

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

Spät zur Party. Aber am Ende habe ich Folgendes getan:

In Ihrem Controller:

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

Eine Verbesserung der @ Mormegil-Lösung

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

verwendungszweck

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

2 1 0 -1 -2 -

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

- 3 -2 -1 0 1 2

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

1 2

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

-1 -2 -

1

Dies ist die verbesserte Antwort von jzm. Die Funktion hat einen Start-/Endbereichswert, ist also flexibler und ... funktioniert. Dieser besondere Fall gilt für den Tag des Monats:

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

Ich habe Folgendes versucht und es hat gut funktioniert:

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

Winkel 1.3.6

1
araghorn

Set Scope in controller

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

Set Wiederholung in HTML-Vorlagendatei

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

Ich habe das aufgepeppt und gesehen, dass es für einige nützlich sein könnte. (Ja, CoffeeScript. Sue mich.)

Richtlinie

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)

Benutzen:

HTML

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

Kann das einfacher werden?

Ich bin vorsichtig mit Filtern, weil Angular sie die ganze Zeit ohne triftigen Grund neu bewertet, und es ist ein großer Engpass, wenn Sie Tausende von Filtern haben, wie ich.

Diese Direktive überwacht sogar Änderungen in Ihrem Modell und aktualisiert das Element entsprechend.

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

Wenn Sie dies in HTML ohne Controller oder Fabrik erreichen möchten.