How to display data in the table using Angular js

Total Post:154

Points:1086

 1546  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. 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

Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.