Post
Ask Question

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 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.

MVC 5 empty project

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

Nuget package

Note. It’s better to install AngularJS Core.

After that add Bootstrap CSS.

Bootstrap CSS

Add a controller and name it HomeController.

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

Output

Hope this article was helpful.


Similar Articles