Way to Ng-Repeat Defined Number of Times Instead of Repeating Over Array

Way to ng-repeat defined number of times instead of repeating over array?

Update (9/25/2018)

Newer versions of AngularJS (>= 1.3.0) allow you to do this with only a variable (no function needed):

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

This was not possible at the time the question was first asked. Credit to @Nikhil Nambiar from his answer below for this update



Original (5/29/2013)

At the moment, ng-repeat only accepts a collection as a parameter, but you could do this:

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

And somewhere in your controller:

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

This would allow you to change $scope.number to any number as you please and still maintain the binding you're looking for.

EDIT (1/6/2014) -- Newer versions of AngularJS (>= 1.1.5) require track by $index:

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

Here is a fiddle with a couple of lists using the same getNumber function.

Iteration ng-repeat only X times in AngularJs

Angular comes with a limitTo:limit filter, it support limiting first x items and last x items:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>

how to use ng-repeat loop by number of count in angularJS

You can use constructor like this (no code in js required) :

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> <table> <tr ng-repeat="n in [].constructor(10) track by $index"> <td>abc</td> </tr> </table> </div>
</body>
</html>

Angular js:ng-model is over writing the items in the ng-repeat

you are assigning the reference of the variable that's why its changing. you have to copy the variable. below is working example:-

var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) {    $scope.items= [       {id:1,name:'first'},{id:2,name:'second'}    ];        $scope.editItem = function(index){    //edit      $scope.edit = angular.copy($scope.items[index]);          }});
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><body>
<div ng-app="myApp" ng-controller="myCtrl"> <p ng-repeat="item in items">{{item.id+','+item.name}} <span ng-click="editItem($index)">Click to Edit {{item.name}} item</span> </p> <h2>Edit</h2> <input type="text" ng-model="edit.name" /></div>

How can i run a loop using ng-repeat 1 times more than data in array in Angular JS

may be try like this just push one object in to the array

https://plnkr.co/edit/LTxT2DEeAC0nVrmPEYLE?p=preview

JS

 $scope.data =[
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
{"Name":"Around the Horn","City":"London","Country":"UK"}]

var obj ={};
obj.name ="";
obj.London ="";

$scope.data.push(obj)

Ng-repeat one element multiple times based on its properties

There's a simple and pure JavaScript way:

<li ng-repeat="car in cars">
<p2 ng-repeat="item in [].constructor(car.count) track by $index">{{car.element}}</p2>
</li>


Related Topics



Leave a reply



Submit