How to display data in the table using Angular js

Manoj Bhatt 2927 03 Mar 2016

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 Answers

Anupam Mishra 04 Mar 2016

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:

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How to display data in the table using Angular js

Can you answer this question?

1 Answers