angularjsHow do I use ng-repeat in AngularJS?
Ng-Repeat is an AngularJS Directive that allows you to iterate through a collection of data and create a new HTML element for each item in the collection. It is a powerful tool to quickly generate HTML elements with data from the scope.
Example code
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.items = [1,2,3,4,5];
});
</script>
Output example
1
2
3
4
5
The code above will iterate through the items array in the scope and create a new <li>
element for each item in the array. The ng-repeat
directive will take the value of the item
variable inside the <li>
element and replace it with the value of each item in the array.
Code explanation
<div ng-controller="MyCtrl">
- This is the directive that tells AngularJS to use theMyCtrl
controller.<li ng-repeat="item in items">
- This is the directive that tells AngularJS to loop through theitems
array in the scope and create a new<li>
element for each item in the array.{{ item }}
- This is the expression that tells AngularJS to take the value of theitem
variable and replace it with the value of each item in the array.var app = angular.module('myApp', []);
- This is the code that creates an AngularJS module with the namemyApp
.app.controller('MyCtrl', function($scope) {
- This is the code that creates theMyCtrl
controller.$scope.items = [1,2,3,4,5];
- This is the code that creates an array of items in the scope.
Helpful links
More of Angularjs
- How can I become an Angular expert from a beginner level?
- How can I create an editable AngularJS application?
- How can I use the Yandex Map API with AngularJS?
- How can I use Angular to zoom in and out of a div?
- How do I install Yarn using Angular?
- How do I use AngularJS to zoom in on an image?
- How do I use Angular Zone to run my code?
- How do I use Angular to zip files?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I copy an element in AngularJS?
See more codes...