Bind data on view using ng-repeat in angularJs

Table of Content

  • Background
  • What is ng-repeat
  • Sytax
  • Example

Before reading this article, I highly recommended reading my previous article on angularJS.

Background

When we are using any technology all of us doing one thing which is common that list 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 is nothing but it’s loop in our respective technology. According to angular official “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.

Create-Project

After creating a project lets add angularjs using nuget package. You can install angularjs core.

Add-AngularJs-Lib

Note: It’s better to install angularjs core.

After that add the bootstrap.
BootStrap

Add a controller and name it HomeController.

Add-Controller

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="Pramod@gmail.com",Phone="987654321"},
             new {Name="Prem",Email="Prem@gmail.com",Phone="123456789"},
             new {Name="Ram",Email="Ram@gmail.com",Phone="9811234343"},
             new {Name="Shyam",Email="Shyam@gmail.com",Phone="9889657454"},
             new {Name="Jitesh",Email="Jitesh@gmail.com",Phone="9535468899"},
             new {Name="Rashmi",Email="Rashmi@gmail.com",Phone="965453532453"},
             new {Name="Sumit",Email="Sumit@gmail.com",Phone="9098867456343"},
             new {Name="Awashesh",Email="Awashesh@gmail.com",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).

_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 Scripts folder and in 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

serial-no-output

Hope this article is helpful.

Tags: , , ,