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
"Mixed Content Blocked" When Running an Http Ajax Operation in an Https Page
Jquery Mobile: Document Ready Vs. Page Events
Invoking JavaScript Code in an Iframe from the Parent Page
Jquery Mobile: Markup Enhancement of Dynamically Added Content
Convert Json Data to a HTML Table
How to Call Multiple JavaScript Functions in Onclick Event
Best Way to Track Onchange As-You-Type in Input Type="Text"
How Can JavaScript Upload a Blob
When Do Items in Html5 Local Storage Expire
How to Simulate a Hover With a Touch in Touch Enabled Browsers
How to Get Current Formatted Date Dd/Mm/Yyyy in JavaScript and Append It to an Input
How to Validate Inputs Dynamically Created Using Ng-Repeat, Ng-Show (Angular)
How to Add an "Add to Favorites" Button or Link on My Website
How to Prevent Iframe from Redirecting Top-Level Window
Angularjs Post Fails: Response For Preflight Has Invalid Http Status Code 404
Adding Two Numbers Concatenates Them Instead of Calculating the Sum