Angularjs : Auto numbering/serial number to rows - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.


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:
Angularjs  Auto numberingserial number to rows



What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon