Bind Data On View Using ng-repeat in AngularJS

Pramod Thakur
8y
13.9k
0
3

Article

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 record 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 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 a MVC 5 empty project and name it AngularWithMVC.

After creating a project let's add AngularJS using 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 views folder. Add _layout.cstml in 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>