Display the data in table using ng-repeat using WebAPI and AngularJS.

Introduction:
This article explain you to display the data in table using ng-repeat using WebAPI and AngularJS.
Description:
ng-repeat directive can be used to draw table easily. Below code is used  of ng-repeat directive to draw a table.

To implement this we need to write the code like as shown below

HTML Java Script CSS:

Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
    <link href="css/master.css" rel="stylesheet" />
    <link href="css/collapsemenu.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="scripts-common/jquery-2.1.4.js"></script>
    <script src="scripts-angular/angular.js"></script>
    <script src="scripts-angular/angular-route.js"></script>


    <!--ng-progress-->
    <script src="scripts-ngprogress/build/ngprogress.js"></script>
    <link href="scripts-ngprogress/ngProgress.css" rel="stylesheet" />

    <script src="scripts-ctrls/ng-main-ctrl.js"></script>
    <script src="scripts-ctrls/ng-menu.js"></script>
    <script src="scripts-ctrls/employeeCtrl.js"></script>


    <script type="text/javascript">
        var flag = 0;

        $(document).ready(function () {

            $('#containerview').css('height', ($(window).height() - 30) + 'px');
            $('#containerview').css('width', ($(window).width() - 170) + 'px');
            $('#containernavigation').css('height', ($(window).height() - 30) + 'px');

        });

        var slidedMenuId = "";
        function expand(menuid) {
            if (slidedMenuId != menuid) {
                $(".collapsemenu").slideUp(400);
                $('#' + menuid).slideDown(400);
                slidedMenuId = menuid;
            }
            else {
                $(".collapsemenu").slideUp(400);
                $('#' + menuid).slideUp(400);
                slidedMenuId = "";
            }
        }


    </script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            "use strict";
            $('#containernavigation').perfectScrollbar();
        });
    </script>
    <base href="/" />
</head>
<body>
    <div class="header">
        <div class="header_left">
        </div>
        <div class="header_middle">
        </div>
        <div class="header_right">

            <div class="header_userinfo_left">
            </div>

            <div class="header_userinfo_right">
                <div class="notification">
                </div>
                <div class="userphoto_panel">
                </div>
                <div class="logout">
                </div>
            </div>

        </div>
        <div class="clear"></div>
    </div>


    <div ng-app="myApp" ng-controller="mainController">
        <div id="sliderNavigation" style="border: 0px solid #000;">
            <div class="page_container_left font" style="border: 0px solid #000;" id="containernavigation">
                <div id="admin_menu" runat="server">
                    <div id="setting_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('setting_menu')">
                        <a class="setting_tab">Setting</a>
                    </div>
                    <div id="setting_menu" class="collapsemenu">
                        <a class="collapsemenu_item" href="#/Home">Home</a>
                        <a class="collapsemenu_item" href="#About">About</a>
                        <a class="collapsemenu_item" href="#Contact">Contact</a>
                        <a class="collapsemenu_item" href="#ManageEmployee">Employee Details</a>

                    </div>

                    <div id="home_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('home_menu')">
                        <a class="setting_tab">Home</a>
                    </div>
                    <div id="home_menu" class="collapsemenu">
                        <a class="collapsemenu_item" href="#/Home">Home</a>
                        <a class="collapsemenu_item" href="#About">About</a>
                        <a class="collapsemenu_item" href="#Contact">Contact</a>
                    </div>

                    <div id="about_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('about_menu')">
                        <a class="setting_tab">About</a>
                    </div>
                    <div id="about_menu" class="collapsemenu">
                        <a class="collapsemenu_item" href="#/Home">Home</a>
                        <a class="collapsemenu_item" href="#About">About</a>
                        <a class="collapsemenu_item" href="#Contact">Contact</a>
                    </div>
                </div>
            </div>
            <%--Container Pages--%>
                <div style="border: 0px solid #000;" id="containerview" class="page_container font">
                    <div class="col-lg-12 ">
                        <div class="pagetittle">
                            : : 
                            <p ng-bind="pagetitle"></p>
                        </div>
                    </div>
                    <div class="col-lg-12 ">
                        <div ng-view class="content">
                        </div>
                    </div>
                </div>

        </div>
    </div>
    <div class="footer">
        © 2016 www.logicspark.in All Rights Reserved. The content is copyrighted to Muhammad Asif.
    </div>
</body>
</html>

Employee.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Manage Employee</title>
    <style type="text/css">
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }

            table tr:nth-child(odd) {
                background-color: #f2f2f2;
            }

            table tr:nth-child(even) {
                background-color: #ffffff;
            }
    </style>
</head>
<body>
    <div ng-controller="employeeController" ng-init="fetchdata()">
        <table style="width: 100%;" border="1">
            <tr>
                <th>Id</th>
                <th>Name</th>

                <th>Gender</th>

                <th>Dept</th>

                <th>Salary</th>

            </tr>
            <tr ng-repeat="items in griddata">
                <td>{{items.Id}}</td>
                <td>{{items.Name}}</td>
                <td>{{items.Gender}}</td>
                <td>{{items.DeptId}}</td>
                <td>{{items.Salary}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

employee controller.js

myApp.controller("employeeController", function ($scope, $http, $log) {
    $scope.title = 'Fetch data using AngularJS and WebAPI';
    $scope.griddata;
    $scope.fetchdata = function () {

        $http({
            method: 'GET',
            url: '../api/EmployeeDetails/GetEmployees',
        }).then(successCallback, errorCallback).finally(function () { });

    };


    var successCallback = function (response) {
        $scope.griddata = response.data;
    };
    var errorCallback = function (response) {
        $scope.error = response.data;
    };

});



Web API

using AngularJSCURD.Models;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Script.Serialization;

namespace AngularJSCURD.Controllers
{
    public class EmployeeDetailsController : ApiController
    {
        string strConnectionString = ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;
        string strSQLQuery = "";


        [HttpGet]
        public List<Employee> GetEmployees()
        {
            IDataReader objIDataReader;

            strSQLQuery = "SELECT * FROM tblEmployees";
            List<Employee> objEmployeeList = new List<Employee>();
            using (SqlConnection con = new SqlConnection(strConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = strSQLQuery;
                    cmd.Connection = con;
                    con.Open();
                    objIDataReader = cmd.ExecuteReader();
                    while (objIDataReader.Read())
                    {
                        Employee objEmployee = new Employee();
                        objEmployee.Id = Convert.ToInt32(objIDataReader["Id"]);
                        objEmployee.Name = objIDataReader["Name"].ToString();
                        objEmployee.Gender = objIDataReader["Gender"].ToString();
                        objEmployee.DeptId = Convert.ToInt32(objIDataReader["DeptId"]);
                        objEmployee.Salary = Convert.ToInt32(objIDataReader["Salary"]);
                        objEmployeeList.Add(objEmployee);
                    }

                }
            }
            return objEmployeeList;
        }
    }
}

DEMO

ngrepeat

Blogger Tips and TricksLatest Tips And TricksBlogger Tricks