HOW TO DISPLAY DATA IN THE TABLE USING ANGULAR JS

Manoj Bhatt

Total Post:154

Points:1086
Posted by  Manoj Bhatt
 948  View(s)
Ratings:
Rate this:
Hi All,

I want to display all data of student table with their name and other details in a table using angular js mvc patterns.
Please give me suggestion or example to display data using asp.net mvc 4 Application.

Thank you.
  1. Anupam Mishra

    Post:135

    Points:949
    Re: How to display data in the table using Angular js

    Hi Manoj,


    If you want to use MVC pattern in angular js in your ASP.NET MVC Application Then you will be  design  Their Model,Controller and view.

    Here we have  Student model is below:



    Now, My Model of angular js named Model.js

    var app = angular.module("MyApp", []);



    Controller.js:

    app.controller("HomeController", function ($scope, myService)
    {
        $scope.divStudent = false;
        GetAllStudent();
        //To Get All Records
        function GetAllStudent() {
            var getData = myService.getStudents();
             getData.then(function (stud) {
                $scope.Students = stud.data;
            }, function () {
                $('#alertcontent').html('Error in getting record');
                $('#alertmodal').modal("show");
            });
        }


    Service.js:


    app.service("myService", function ($http) {
        //get All Student
        this.getStudents = function () {
            debugger;
            return $http.get("Home/GetAll");
           
        };
     
         //get StudentBy Id
        this.getStudent = function (StudentID) {
            var response = $http({
                method: "post",
                url: "Home/getStudentByNo",
                params: {
                    id: JSON.stringify(StudentID)
                }
            });
            return response;
        }


    Home Controller:(ASP.NET 'HomeController')




    Index.cshtml


      <html ng-app="MyApp"><div class="container">
            <div ng-controller="HomeController">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h3>Student Details Page</h3>
                        </div>
                        <div style="float: right; font-size: 80%; position: relative; top: -29px">
     <input type="button" class="btnAdd btn btn-success" value=" Add Student" ng-click="AddStudentDiv()" />
           <input type="button" class="btnAdd btn btn-success" value=" History" ng-click="HistoryDiv()" />
                        </div>
                    </div>
                    <div style="padding-top: 30px" class="panel-body">
                        <div class="divList">
                   <p class="divHead">Student List</p>
                            <div style="float: right; font-size: 120%; position: relative; top: -29px">
                                <input type="text" ng-model="letter" placeholder="Search By Name">
                            </div>
                            <table cellpadding="12" class="table table-bordered table-hover">
                                <tr>
                                    <td><b>Student ID</b></td>
                                    <td><b>First Name</b></td>
                                    <td><b>Last Name</b></td>
                                    <td><b>Enrollment Date</b></td>
                                    <td><b>Actions</b></td>
                                </tr>
            <tr ng-repeat="student in Students|filter: letter |orderBy: 'FirstName'|orderBy: 'LastName'">
                                    <td>{{student.StudentID}}
                                    </td>
                                    <td>{{student.FirstName}}
                                    </td>
                                    <td>{{student.LastName}}
                                    </td>
                                    <td>{{ student.EnrollmentDate.slice(6, -2) | date:"dd-MMM-yyyy"}}
                                    </td>
                                    <td>
     <span ng-click="editmodelStudent(student)" style="cursor: pointer; color: #0746D4;" class="btnAdd b tn btn-default btn-xs">Edit</span>
     <span ng-click="deleteStudent(student)" style="cursor: pointer; color: #0746D4;" class="btnRed btn        btn-default btn-xs">Delete</span>
                   </td>
               </tr>
        </table>
      </div>


    Output:



      Modified On Mar-04-2016 12:10:13 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!