What
is ng-repeat in angularjs? How to achieve it?
The ng-repeat is directive that is use to iterate the array data objects in the DOM elements as
given below.
Go to live demo http://embed.plnkr.co/lQLDGn8tjty1XGngPFBz/preview
The AngularJS code sample
var app =
angular.module('myApp',
[]);
app.controller('myRepeatCtrl', function($scope) {
$scope.employee = [{
Id: 1,
name: 'EMP1'
}, {
Id: 2,
name: 'EMP2'
} ,{
Id: 3,
name: 'EMP3'
}];
});
The HTML code sample
< div ng-app="myApp">
<div ng-controller="myRepeatCtrl">
<div>ID Name </div>
<div ng-repeat="emp in employee">
<div >
<div>{{emp.Id}} || {{emp.name}}</div>
</div>
</div>
</div>
</ div >
The Full live code sample(HTML +
AngularJs) as given below
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app =
angular.module('myApp',
[]);
app.controller('myRepeatCtrl', function($scope) {
$scope.employee = [{
Id: 1,
name: 'EMP1'
}, {
Id: 2,
name: 'EMP2'
} ,{
Id: 3,
name: 'EMP3'
}];
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myRepeatCtrl">
<div>ID Name </div>
<div ng-repeat="emp in employee">
<div>
<div>{{emp.Id}} {{emp.name}}</div>
</div>
</div>
</div>
</body>
</html>
The
output got to link http://embed.plnkr.co/lQLDGn8tjty1XGngPFBz/preview
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
Blogger Comment
Facebook Comment