ng-repeat in AngularJS
Download angularjs from following website -
https://angularjs.org
Click here to see the demo / output
Html Code
<script src="angular.1.4.8.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyController">
<style type="text/css">
table, td, th {
border-collapse: collapse;
border: 1px solid red;
padding: 5px;
font-family:Calibri;
}
</style>
<h1>{{Title}}</h1>
<hr />
<table id="DemoTable">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Country</th>
</tr>
<tr ng-repeat="x in DetailArray">
<td>{{x.Name}}</td>
<td>{{x.LastName}}</td>
<td>{{x.Address}}</td>
</tr>
</table>
</div>
</div>
<script src="index.js"></script>
AngularJS Code
/// <reference path="angular.1.4.8.min.js" />
var ngapp = angular.module("MyApp", []);
ngapp.controller("MyController", function ($scope) {
$scope.Title = "ng-repeat";
var TempArray = [{ Name: "John", LastName: "Doe", Address: "California" },
{ Name: "Jennifer", LastName: "Dolle", Address: "London" },
{ Name: "Theon", LastName: "GreyJoy", Address: "IronBorn" },
{ Name: "Cersei", LastName: "Lannistor", Address: "7 Kingdom" }];
$scope.DetailArray = TempArray;
});
Click here to see the demo / output
No comments