Angular

Bind Data On View Using ng-repeat in AngularJS

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
  1. <tr ng-repeat="data in dataList">  
  2. <td>{{$index+1}}</td>  
  3.        <td ng-bind="data.Name"></td>  
  4.        <td ng-bind="data.Email"></td>  
  5.        <td ng-bind="data.Phone"></td>  
  6. </tr>  
Example

I am going to create a MVC 5 empty project and name it AngularWithMVC.

MVC 5 empty project

After creating a project let's add AngularJS using nuget package. You can install AngularJS core.

nuget package

Note: It’s better to install AngularJS Core.

After that add Bootstrap CSS.

bootstrap

Add a controller and name it HomeController.

HomeController

HomeController.cs
  1. using System.Web.Mvc;  
  2.   
  3. namespace AngularWithMVC.Controllers  
  4. {  
  5.     public class HomeController : Controller  
  6.     {  
  7.           
  8.         public ActionResult Index()  
  9.         {  
  10.             return View();  
  11.         }  
  12.   
  13.         public JsonResult JsonValue()  
  14.         {  
  15.             var data = new[]{ new {Name="Pramod",Email="[email protected]",Phone="987654321"},  
  16.              new {Name="Prem",Email="[email protected]",Phone="123456789"},  
  17.              new {Name="Ram",Email="[email protected]",Phone="9811234343"},  
  18.              new {Name="Shyam",Email="[email protected]",Phone="9889657454"},  
  19.              new {Name="Jitesh",Email="[email protected]",Phone="9535468899"},  
  20.              new {Name="Rashmi",Email="[email protected]",Phone="965453532453"},  
  21.              new {Name="Sumit",Email="[email protected]",Phone="9098867456343"},  
  22.              new {Name="Awashesh",Email="[email protected]",Phone="342658678574"}  
  23.             };  
  24.             return Json(data, JsonRequestBehavior.AllowGet);  
  25.   
  26.         }  
  27.     }  
  28.   
  29. }  
Add a shared and home folder in views folder. Add _layout.cstml in shared folder for layout (master page).

In _layout.cshtml
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>@ViewBag.Title</title>  
  6.         <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  
  7.         <script src="~/Scripts/jquery-1.9.1.min.js"></script>  
  8.         <script src="~/Scripts/bootstrap.min.js"></script>  
  9.         <script src="~/Scripts/angular.min.js"></script>  
  10.     </head>  
  11.     <body>  
  12.         <header>  
  13.             <div class="row" style="padding-left:20px;"><h1>ng-repeat in AngularJS</h1></div>  
  14.         </header>  
  15.          <section>  
  16.             @RenderBody()  
  17.         </section>  
  18.         <footer>  
  19.             <div class="row" style="padding-left:20px;"><p>© @DateTime.Now.Year - My ASP.NET MVC Application With AngularJS</p></div>  
  20.         </footer>  
  21.     </body>  
  22. </html>  
Add a folder called Data in Scripts folder and in data folder add a javascript file data.js.

Data.js
  1. var myApp = angular.module('myModule', []);  
  2. myApp.controller('myController', function ($scope, $http) {  
  3.     $scope.dataList = [];  
  4.     $http.get('/Home/JsonValue').success(function (response) {  
  5.         if (response != null || response != "undefined"){  
  6.             $scope.dataList = response;  
  7.         }  
  8.     })  
  9. });  
Add a view and name it Index and in this view call _layout.cshtml.

Index.cshtml
  1. @{  
  2.     ViewBag.Title = "Index";  
  3.     Layout = "~/Views/Shared/_layout.cshtml";  
  4. }  
  5. <script src="~/Scripts/Data/Data.js"></script>  
  6. <div class="table-responsive" ng-app="myModule" ng-controller="myController">  
  7.     <table class="table" style="width:600px">  
  8.         <thead>  
  9.             <tr>  
  10.                 <th>SN</th>  
  11.                 <th>Name</th>  
  12.                 <th>Email</th>  
  13.                 <th>Phone</th>  
  14.             </tr>  
  15.         </thead>  
  16.         <tbody>  
  17.             <tr ng-repeat="data in dataList">  
  18.                 <td>{{$index+1}}</td>  
  19.                 <td ng-bind="data.Name"></td>  
  20.                 <td ng-bind="data.Email"></td>  
  21.                 <td ng-bind="data.Phone"></td>  
  22.             </tr>  
  23.         </tbody>  
  24.     </table>  
  25. </div>  
Let’s run and see the output.

Output

Output

Hope this article was helpful.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs