Table of Contents
- Background
- What is ng-repeat
- Syntax
- Example
Before reading this article, I highly recommended reading my previous article on AngularJS.
Background
When we are using any technology we all do a common thing. It includes listing records on our view no matter what technology we use. So in this article, I am going to bind data on view using ng-repeat.
What is ng-repeat?
ng-repeat loop in our respective technology. According to AngularJS's official website
“The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item.
Syntax
<tr ng-repeat="data in dataList">
<td>{{$index + 1}}</td>
<td ng-bind="data.Name"></td>
<td ng-bind="data.Email"></td>
<td ng-bind="data.Phone"></td>
</tr>
Example
I am going to create an MVC 5 empty project and name it AngularWithMVC.
After creating a project let's add AngularJS using the Nuget package. You can install AngularJS core.
Note. It’s better to install AngularJS Core.
After that add Bootstrap CSS.
Add a controller and name it HomeController.
HomeController.cs
using System.Web.Mvc;
namespace AngularWithMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult JsonValue()
{
var data = new[]
{
new { Name = "Pramod", Email = "[email protected]", Phone = "987654321" },
new { Name = "Prem", Email = "[email protected]", Phone = "123456789" },
new { Name = "Ram", Email = "[email protected]", Phone = "9811234343" },
new { Name = "Shyam", Email = "[email protected]", Phone = "9889657454" },
new { Name = "Jitesh", Email = "[email protected]", Phone = "9535468899" },
new { Name = "Rashmi", Email = "[email protected]", Phone = "965453532453" },
new { Name = "Sumit", Email = "[email protected]", Phone = "9098867456343" },
new { Name = "Awashesh", Email = "[email protected]", Phone = "342658678574" }
};
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
Add a shared and home folder in the views folder. Add _layout.cstml in the shared folder for layout (master page).
In _layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<header>
<div class="row" style="padding-left:20px;">
<h1>ng-repeat in AngularJS</h1>
</div>
</header>
<section>
@RenderBody()
</section>
<footer>
<div class="row" style="padding-left:20px;">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application With AngularJS</p>
</div>
</footer>
</body>
</html>
Add a folder called Data in the Scripts folder and in the data folder add a javascript file data.js.
Data.js
var myApp = angular.module('myModule', []);
myApp.controller('myController', function($scope, $http) {
$scope.dataList = [];
$http.get('/Home/JsonValue').success(function(response) {
if (response != null || response != "undefined") {
$scope.dataList = response;
}
});
});
Add a view and name it Index and in this view call _layout.cshtml.
Index.cshtml
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_layout.cshtml";
}
<script src="~/Scripts/Data/Data.js"></script>
<div class="table-responsive" ng-app="myModule" ng-controller="myController">
<table class="table" style="width:600px">
<thead>
<tr>
<th>SN</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td>{{$index + 1}}</td>
<td ng-bind="data.Name"></td>
<td ng-bind="data.Email"></td>
<td ng-bind="data.Phone"></td>
</tr>
</tbody>
</table>
</div>
Let’s run and see the output.
Output
Hope this article was helpful.
Niranjan pandeyPosted Nov 16, 2017, 11:39 AM
Nice work pramod thakur
Gowtham RajamanickamPosted Apr 2, 2016, 12:38 PM
Good one..
Kumaresh RajalingamPosted Mar 23, 2016, 9:18 PM
Nice one
Pramod ThakurPosted Mar 22, 2016, 12:09 AM
thx Kashif Sohail..
Kashif SohailPosted Mar 21, 2016, 10:58 PM
Very Nice article sir
Pramod ThakurPosted Mar 21, 2016, 10:42 AM
tnx Vignesh Mani
Vignesh ManiPosted Mar 21, 2016, 9:26 AM
Good
Pramod ThakurPosted Mar 21, 2016, 4:09 AM
thank you Debasis Saha..
Debasis SahaPosted Mar 21, 2016, 4:03 AM
Good One..
Pramod ThakurPosted Mar 20, 2016, 10:10 PM
thx Abhay Shanker...
Abhay ShankerPosted Mar 20, 2016, 12:47 PM
Nice One...
Pramod ThakurPosted Mar 20, 2016, 11:53 AM
thank you Saillesh Pawar..
Pramod ThakurPosted Mar 20, 2016, 11:52 AM
thank you Ankur Mistry
Pramod ThakurPosted Mar 20, 2016, 11:51 AM
thx Vignesh Mani
Pramod ThakurPosted Mar 20, 2016, 11:51 AM
tnx Pradeep Sahoo
Ankur MistryPosted Mar 20, 2016, 11:18 AM
Very nice and helpful
Saillesh PawarPosted Mar 20, 2016, 10:34 AM
Nice share pramod sir
Vignesh ManiPosted Mar 20, 2016, 10:32 AM
Nice
Pradeep SahooPosted Mar 20, 2016, 9:31 AM
well written .Thanks for writting