Angularjs : Auto numbering/serial number to rows

In this article I am going to explain how to add auto numbering/ serial number to rows in Angularjs ng-repeat.

In previous article I have explained how to set alternative color of column inasp.net chart control, how to create column chart using Chart control inasp.net and how to use Google document viewer in asp.net website.

Description:

$index variable is used to auto numbering for rows in ng-repeat.

E.g. {{$index+1}}

Implementation:

I have created a table employee and insert some dummy record into it.

Model

namespace MVC_Project.Models

{

    using System;

    using System.Collections.Generic;

   

    public partial class Employee

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public Nullable<int> Phone { get; set; }

        public Nullable<int> Salary { get; set; }

        public string Department { get; set; }

        public string ImagePath { get; set; }

        public string EmailId { get; set; }

    }

}

Add Controller

Add controller to project and create Json method to fetch data from database.

Complete Code of Controller:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MVC_Project.Models;

namespace MVC_Project.Controllers

{

    public class DemoController : Controller

    {

        //

        // GET: /Demo/

        DemoEntities1 db = new DemoEntities1();

        public ActionResult Index()

        {

            return View();        }

  

        public JsonResult GetEmployee()

        {

            var emp = db.Employees.ToList();

            return Json(emp, JsonRequestBehavior.AllowGet);

        }

     

    }

}

Add View

Add a view for index action. After that add the Angularjs CDN to page.

Complete Code of View:

@{

    ViewBag.Title = "AngularJs Tutorial";

}

<style>

</style>

<h2>AngularJs Tutorial : Serial Number Example</h2>

<div ng-app="mvcapp" ng-controller="DemoController">   

    <table>

        <tr>

            <th>S.No</th>

            <th>

                Name

            </th>

            <th>

                Phone

            </th>

            <th>

                Department

            </th>

            <th>

                Salary

            </th>

            <th>

                Email

            </th>

        </tr>

        <tr ng-repeat="empModel in employees">

            <td>{{$index+1}}</td>

            <td>{{empModel.Name }}</td>

            <td>{{empModel.Phone }}</td>

            <td>{{empModel.Department}}</td>

            <td>{{empModel.Salary }}</td>

            <td>{{empModel.EmailId ||'Email not available'}}</td>

            <td>

                <a href="" ng-click="getCustomer(empModel)" title="Delete Record">Edit</a>  |

                <a href="" ng-click="deleteemp(empModel)" title="Delete Record">

                    Delete

                </a>

            </td>

        </tr>

    </table>

</div>

<style>

    input[type=button][disabled=disabled] {

        opacity: 0.65;

        cursor: not-allowed;

    }

    table tr th {

        padding: 10px 30px;

    }

    table tr td {

        padding: 10px 30px;

    }

</style>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<script>

    var angular = angular.module('mvcapp', []);

    angular.controller('DemoController', function ($scope, $http) {

        GetAllData();

        $scope.isDisabledupdate = true;

        //Get All Employee

        function GetAllData() {

            $http.get('/Demo/GetEmployee').success(function (data) {

                $scope.employees = data;

            });

        };

    });

</script>

Result: