Display details from Database based on Id on Button Click using AngularJS in ASP.Net MVC

Last Reply 7 days ago By dharmendr

Posted 8 days ago

Hi,

I have 5 tables

AutoPopList

id value

1 23

2 34

3 10

Orders table

OrderId OrderName

1 mahesh

2 rahul 

Items table

Id Name OrderId

1 aaa 1

2 bbb 1

3 ccc 2

subitem2 table 

aid RAI_Id text

1 1 dhdhhd

2 1 34444

3 2 fjfjjf

subitem4 table

aid RAI_Id text

1 1 dhhdhd

2 1 3hdhdh

3 2 ddduu

Right now my rquirement

I have one grid view In grid view I have 3 buttons add ,delete and edit

Add function working Properly

i need to edit orders details based upon OrderId that means after clicking of edit functionality we want to populate relevant OrderId values on form.

I didn't get how to do edit.

@{
    Layout = null;
}

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="~/scripts/dirpagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
    app.controller('MyController', function ($scope, $http, $window, RegistrationService) {
        //Loads all Employee records when page loads
        loadEmployees();

        $scope.ShowHide = function () {
            //If DIV is visible it will be hidden and vice versa.
            $scope.invoice = $scope.invoice ? false : true;
        }

        function loadEmployees() {
            var EmployeeRecords = RegistrationService.gettaxes();
            EmployeeRecords.then(function (d) {
                $scope.taxes = d.data;
            },
            function () {
                alert("Error occured while fetching employee list...");
            });
        }

        //To Get All Records  
        GetAllEmployees();
        function GetAllEmployees() {
            debugger;
            var getData = RegistrationService.getEmployees();

            getData.then(function (emp) {
                $scope.employees = emp.data;
            }, function (emp) {
                alert("Records gathering failed!");
            });
        }

        $scope.Customers = [];
        $scope.taxes = [];
        $scope.newtaxes = [];

        $scope.change = function (i) {
            if ($(this)[0].checkbox) {
                $scope.newtaxes.push($scope.taxes[i]);
            }
            else {
                $scope.newtaxes.pop($scope.taxes[i]);
            }
        };

        $scope.subitems = [];
        
        $scope.remove1 = function (index) {
            var name = $scope.subitems[index].text;
            if ($window.confirm("Do you want to delete: " + name)) {
                $scope.subitems.splice(index, 1);
            }
        }
        $scope.EditCustomer = function (data) {
            $scope.editing = true;
            $scope.selected = angular.copy(data);
        };
        $scope.SaveCustomer = function (id) {
            $scope.editing = false;
            $scope.Value[id] = angular.copy($scope.selected);
        };
    });
    app.service("RegistrationService", function ($http) {
        //get All taxes

        //get All Employee
        this.getEmployees = function () {
            return $http.get("/dynamicaalyaddremove/getAll");
        };
        this.gettaxes = function () {
            return $http.get("/dynamicaalyaddremove/getAll1");
        };
    });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-show="invoice"></div>
    </div>
</body>
</html>

 

        public JsonResult getAll()
        {
            db.Configuration.ProxyCreationEnabled = false;
            var employeeList = (from TP in db.Orders3
                                select new
                                {
                                    OderId = TP.OrderId,
                                    OrderName = TP.OrderName,                                   
                                }).ToList();

            var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
            JsonResult.MaxJsonLength = int.MaxValue;

            return JsonResult;
        }

        public JsonResult getAll1()
        {
            List<AutoPopList> Emp = db.AutoPopLists.ToList();

            return Json(Emp, JsonRequestBehavior.AllowGet);
        }    

 

Posted 7 days ago Modified on 6 days ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Create a Model class OrderDetails with the properties to hold the records of Order,Item,Subitem2 and Subitem4.

Model

public class OrderDetails
{
    public Order Orders { get; set; }
    public List<Item> Items { get; set; }
    public List<subitem2> Subitem2 { get; set; }
    public List<subitem4> Subitem4 { get; set; }
}

Then in edit click call the controller which will fetch the records from database based on the OrderId.

Then in controller fetch the records from database and pass the Model class as JSON Result to the view and assign to scope variable to display the record.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    MasterEntities db = new MasterEntities();
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult getAll()
    {
        var employeeList = (from TP in db.Orders
                            select new
                            {
                                OderId = TP.OrderId,
                                OrderName = TP.OrderName,
                            }).ToList();

        var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
        //JsonResult.MaxJsonLength = int.MaxValue;

        return JsonResult;
    }

    public JsonResult getAll1()
    {
        List<AutoPopList> Emp = db.AutoPopLists.ToList();
        return Json(Emp, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Edit(int? orderID)
    {
        Order order = new Order();
        var orders = (from o in db.Orders
                        where o.OrderId == orderID
                        select new
                        {
                            OrderId = o.OrderId,
                            OrderName = o.OrderName
                        }).FirstOrDefault();
        order = new Order { OrderId = orders.OrderId, OrderName = orders.OrderName };

        List<Item> listItem = new List<Item>();
        var items = (from i in db.Items
                        where i.OrderId == orderID
                        select new
                        {
                            Id = i.Id,
                            Name = i.Name
                        }).ToList();
        foreach (var item in items)
        {
            listItem.Add(new Item { Id = item.Id, Name = item.Name });
        }

        List<subitem2> listSubitem2 = new List<subitem2>();
        foreach (var item in items)
        {
            var subitems = (from i in db.subitem2
                            where i.RAI_Id == item.Id
                            select new
                            {
                                aid = i.aid,
                                text = i.text,
                                RAI_Id = i.RAI_Id
                            }).ToList();
            foreach (var subitem in subitems)
            {
                listSubitem2.Add(new subitem2 { aid = subitem.aid, text = subitem.text, RAI_Id = subitem.RAI_Id });
            }
        }

        List<subitem4> listSubitem4 = new List<subitem4>();
        foreach (var item in items)
        {
            var subitems = (from i in db.subitem4
                            where i.RAI_Id == item.Id
                            select new
                            {
                                aid = i.aid,
                                text = i.text,
                                RAI_Id = i.RAI_Id
                            }).ToList();
            foreach (var subitem in subitems)
            {
                listSubitem4.Add(new subitem4 { aid = subitem.aid, text = subitem.text, RAI_Id = subitem.RAI_Id });
            }
        }
        OrderDetails details = new OrderDetails();
        details.Orders = order;
        details.Items = listItem;
        details.Subitem2 = listSubitem2;
        details.Subitem4 = listSubitem4;
        return Json(details, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult SaveOrder(Order orders)
    {
        string result = "Error! Order Is Not Complete!";        
        return Json(result, JsonRequestBehavior.AllowGet);
    }

}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="../../dirPagination.js" type="text/javascript"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $http, $window, RegistrationService) {
            loadEmployees();
            $scope.edit = function (index) {
                $scope.invoice = true;
                var id = $scope.employees[index].OderId;
                $.post("/Home/Edit/", { orderID: id }, function (r) {
                    $scope.OrderName = r.Orders.OrderName;
                    $scope.Customers = [];
                    for (var i = 0; i < r.Items.length; i++) {
                        var customer = {};
                        var itemId = r.Items[i].Id;
                        var item2 = [];
                        for (var j = 0; j < r.Subitem2.length; j++) {
                            if (r.Subitem2[j].RAI_Id == itemId) {
                                item2.push(r.Subitem2[j]);
                            }
                        }
                        var item4 = [];
                        for (var j = 0; j < r.Subitem4.length; j++) {
                            if (r.Subitem4[j].RAI_Id == itemId) {
                                item4.push(r.Subitem4[j]);
                            }
                        }
                        customer.OrderName = r.Items[i].Name;
                        customer.Name = r.Items[i].Name;
                        customer.subitems = item2;
                        customer.subitemsTax = item4;
                        customer.taxes = $scope.taxes;
                        $scope.Customers.push(customer);
                    }
                });
            }
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.invoice = $scope.invoice ? false : true;
            }

            function loadEmployees() {
                var EmployeeRecords = RegistrationService.gettaxes();
                EmployeeRecords.then(function (d) {
                    $scope.taxes = d.data;
                }, function () {
                    alert("Error occured while fetching employee list...");
                });
            }

            //To Get All Records 
            GetAllEmployees();
            function GetAllEmployees() {
                var getData = RegistrationService.getEmployees();

                getData.then(function (emp) {
                    $scope.employees = emp.data;
                }, function (emp) {
                    alert("Records gathering failed!");
                });
            }

            $scope.Customers = [];
            $scope.taxes = [];
            $scope.newtaxes = [];

            $scope.change = function (i) {
                if ($(this)[0].checkbox) {
                    $scope.newtaxes.push($scope.taxes[i]);
                }
                else {
                    $scope.newtaxes.pop($scope.taxes[i]);
                }
            };
            $scope.Add = function () {
                loadEmployees();
                //Add the new item to the Array.
                var customer = {};
                customer.OrderName = $scope.OrderName;
                customer.OrderDate = $scope.OrderDate;
                customer.Description = $scope.Description;
                customer.subitems = $scope.subitems;
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                customer.taxes = $scope.newtaxes;
                $scope.Customers.push(customer);
                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
                $scope.subitems = [];
                $scope.newtaxes = [];
            };

            $scope.subitems = [];
            $scope.add2 = function () {

                alert("hello");
                var items = {};
                items.Id = $scope.subitems.length + 1;
                items.text = $scope.text;
                $scope.subitems.push(items);
                $scope.Id = "";
                $scope.text = "";
            }
            $scope.remove1 = function (index) {
                var name = $scope.subitems[index].text;
                if ($window.confirm("Do you want to delete: " + name)) {
                    $scope.subitems.splice(index, 1);
                }
            }

            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.Customers[index].Name;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.Customers.splice(index, 1);
                }
            }
            $scope.remove1 = function (index) {
                var name = $scope.Orders[index].OrderId;
                if ($window.confirm("Do you want to delete: " + name)) {
                    $scope.Orders.splice(index, 1);
                }
            }
            $scope.EditCustomer = function (data) {
                $scope.editing = true;
                $scope.selected = angular.copy(data);
            };
            $scope.SaveCustomer = function (id) {
                $scope.editing = false;
                $scope.Value[id] = angular.copy($scope.selected);
            };

            $scope.Save = function () {
                var orders = {};
                orders.OrderName = $scope.OrderName;
                orders.OrderDate = $scope.OrderDate;
                orders.Description = $scope.Description;
                var details = new Array();
                for (var i = 0; i < $scope.Customers.length; i++) {
                    var detail = {};

                    detail.Name = $scope.Customers[i].Name;
                    var taxes = new Array();
                    var subitems = new Array();
                    for (var j = 0; j < $scope.Customers[i].taxes.length; j++) {
                        var tax = {};
                        //tax.RAI_Id = $scope.Customers[i].taxes[j].id;
                        tax.text = $scope.Customers[i].taxes[j].value;
                        taxes.push(tax);
                    }

                    for (var k = 0; k < $scope.Customers[i].subitems.length; k++) {
                        var sub = {};
                        //tax.RAI_Id = $scope.Customers[i].taxes[j].id;
                        sub.text = $scope.Customers[i].subitems[k].text;
                        subitems.push(sub);

                    }
                    detail.subitem2 = taxes;
                    detail.subitem4 = subitems;
                    details.push(detail);
                }
                orders.details = details;

                $http({
                    method: "Post",
                    url: "/Home/SaveOrder",
                    dataType: 'json',
                    headers: { "Content-Type": "application/json" },
                    data: '{orders: ' + JSON.stringify(orders) + '}'
                }).success(function (data) {
                    alert(data);
                    $scope.Customers = [];
                }).error(function (err) {
                    $scope.Message = err.Message;
                })
                loadEmployees();
            };
        });

        app.service("RegistrationService", function ($http) {
            //get All taxes

            //get All Employee
            this.getEmployees = function () {
                return $http.get("/Home/getAll");
            };
            this.gettaxes = function () {
                return $http.get("/Home/getAll1");
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-show="invoice">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <table class="table table-condensed">
                            <tr class="active">
                                <td>
                                    Order Name
                                </td>
                                <td>
                                    <input type="text" id="orderName" class="form-control" name="name" ng-model="OrderName"
                                        ng-class="submitted?'ng-dirty':''" required autofocus />
                                    <span class="error col-md-offset-2" ng-show="(f1.name.$dirty || submitted) && f1.name.$error.required">
                                        Order Name required!</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Country
                    </th>
                    <th>
                        Subitems
                    </th>
                    <th>
                        taxes
                    </th>
                    <th>
                        &nbsp;
                    </th>
                </tr>
                <tbody ng-repeat="m in Customers">
                    <tr>
                        <td>
                            {{m.Name}}
                        </td>
                        <td>
                            {{m.Country}}
                        </td>
                        <td value="{{m.subitems}}">
                            <button type="button" class="btn btn-primary btn-sm" ng-init="clicked1=false" ng-click="clicked1=!clicked">
                                View Orders
                            </button>
                            <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked1">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" ng-click="clicked1=false">
                                                ×
                                            </button>
                                            <h4 class="modal-title">
                                                Order Details
                                            </h4>
                                        </div>
                                        <div class="modal-body">
                                            <table class="table table-condensed">
                                                <thead>
                                                    <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                            padding-bottom: 6px;">
                                                            OrderId
                                                        </th>
                                                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                            Freight
                                                        </th>
                                                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody ng-repeat="o in m.subitems">
                                                    <tr>
                                                        <td>
                                                            {{o.aid}}
                                                        </td>
                                                        <td>
                                                            {{o.text}}
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-primary" ng-click="clicked1=false">
                                                Ok
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td value="{{m.subitems1}}">
                            <button type="button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
                                View Orders
                            </button>
                            <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" ng-click="clicked=false">
                                                ×
                                            </button>
                                            <h4 class="modal-title">
                                                Order Details
                                            </h4>
                                        </div>
                                        <div class="modal-body">
                                            <table class="table table-condensed">
                                                <thead>
                                                    <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                            padding-bottom: 6px;">
                                                            id
                                                        </th>
                                                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                            Value
                                                        </th>
                                                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                            Action
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody ng-repeat="o in m.subitemsTax">
                                                    <tr>
                                                        <td>
                                                            {{o.aid}}
                                                        </td>
                                                        <td>
                                                            <span ng-show="editOrder != true">{{o.text}}</span>
                                                            <input ng-show="editOrder" type="text" ng-model="o.value" class="form-control" />
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-primary" type="button" ng-show="editOrder != true && editingOrder != true"
                                                                id="Button1" ng-click="editOrder = true; EditOrder(o)">
                                                                <i class="fa fa-fw fa-pencil"></i>
                                                            </button>
                                                            <button class="btn btn-primary" type="button" ng-show="editOrder" id="Button2" ng-click="editOrder = false; SaveOrder($index)">
                                                                <i class="fa fa-save"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-primary" ng-click="clicked=false">
                                                Ok
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <input type="button" ng-click="Remove($index)" value="Remove" />
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>
                            <input type="text" ng-model="Name" />
                        </td>
                        <td>
                            <input type="text" ng-model="Country" />
                        </td>
                        <td>
                            <button type="button" ng-model="subitems" data-toggle="modal" data-target="#popup">
                                Click</button>
                        </td>
                        <td>
                            <button type="button" ng-model="subitems1" data-toggle="modal" data-target="#popup1">
                                Click
                            </button>
                        </td>
                        <td>
                            <input type="button" ng-click="Add()" value="Add" />
                        </td>
                    </tr>
                </tfoot>
            </table>
            <div class="modal fade" id="popup" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                &times;</button>
                            <h4 class="modal-title">
                                Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <div class="s2vk-container">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="panel panel-default">
                                            <table class="table table-condensed">
                                                <thead>
                                                    <tr style="padding-left: 20px; padding-right: 20px;" class="active">
                                                        <th class="thick-line" style="padding-left: 20px; padding-right: 20px; padding-top: 6px;
                                                            padding-bottom: 6px;">
                                                            SNo
                                                        </th>
                                                        <th style="padding-left: 20px; padding-right: 20px;" class="thick-line">
                                                            Text
                                                        </th>
                                                        <th style="padding-left: 20px; padding-right: 20px;" class="thick-line">
                                                            &nbsp;
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData2" ng-repeat="subitem in subitems">
                                                        <td>
                                                            {{subitem.Id}}
                                                        </td>
                                                        <td>
                                                            {{subitem.text}}
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly>
                                                                Delete</button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                                <tfoot>
                                                    <tr style="padding-left: 20px; padding-right: 20px;">
                                                        <td ng-model="Id">
                                                            {{$index+1}}
                                                        </td>
                                                        <td>
                                                            <input type="text" class="input-sm form-control" ng-model="text" />
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-primary" ng-click="add2()">
                                                                Add</button>
                                                        </td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="popup1" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                ×
                            </button>
                            <h4 class="modal-title">
                                Modal Header
                            </h4>
                        </div>
                        <div class="modal-body">
                            <div class="s2vk-container">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="panel panel-default">
                                            <table class="table table-condensed">
                                                <thead>
                                                    <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                            padding-bottom: 6px;">
                                                            Id
                                                        </th>
                                                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                            padding-bottom: 6px;">
                                                            Checkbox
                                                        </th>
                                                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                            Value
                                                        </th>
                                                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                            Action
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData3" ng-repeat="subitem in taxes">
                                                        <td>
                                                            {{subitem.id}}
                                                        </td>
                                                        <td>
                                                            <input type="checkbox" name="vehicle1" ng-model="checkbox" ng-click="change($index)" />
                                                        </td>
                                                        <td>
                                                            <span ng-show="editOrder != true">{{subitem.value}}</span>
                                                            <input ng-show="editOrder" type="text" ng-model="subitem.value" class="form-control" />
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-primary" type="button" ng-show="editOrder != true && editingOrder != true"
                                                                id="Button1" ng-click="editOrder = true; EditOrder(subitem)">
                                                                <i class="fa fa-fw fa-pencil"></i>
                                                            </button>
                                                            <button class="btn btn-primary" type="button" ng-show="editOrder" id="Button2" ng-click="editOrder = false; SaveOrder($index)">
                                                                <i class="fa fa-save"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="padding: 10px 0;">
                <input id="submit" type="button" value="Save" name="add" ng-click="Save()" class="btn btn-success" />
            </div>
        </div>
        <button class="btn btn-success btn-sm " ng-click="ShowHide();" style="margin-left: 15px;">
            Add Order</button>
        <div class="table-responsive " style="overflow-x: auto;">
            <table id="dvData" class="table table-bordered table-hover table-striped" width="50%">
                <tr class="success">
                    <th style="cursor: pointer;" ng-click="sort('OrderName')">
                        <b>Order Name</b> <span class="glyphicon sort-icon" ng-show="sortKey=='OrderName'"
                            ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                        </span>
                    </th>
                    <th>
                        Actions
                    </th>
                </tr>
                <tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
                    ng-model="search">
                    <td>
                        {{employee.OrderName}}
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm" ng-click="remove($index)" readonly>
                            Remove</button>
                        <button class="btn btn-info btn-sm" ng-click="edit($index)">
                            Edit
                        </button>
                    </td>
                </tr>
                <b style="color: #5bc0de; margin-left: 20px;">Total Records </b>: <b>{{employees.length}}
                </b>
            </table>
            <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
            </dir-pagination-controls>
        </div>
    </div>
</body>
</html>

Screenshot