Home > DeveloperSection > Forums > How to display data in the table using Angular js
Manoj Bhatt
Manoj Bhatt

Total Post:153

Points:1079
Posted on    March-03-2016 11:49 PM

 Angular JS JavaScript  Angular JS  Angularjs Directive  Angularjs Scope  Angularjs ng Repeat 
Ratings:


 1 Reply(s)
 495  View(s)
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.


Anupam Mishra

Total Post:135

Points:949
Posted on    March-04-2016 12:05 AM

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

Don't want to miss updates? Please click the below button!

Follow MindStick