---
title: "How to Use AngularJS Table data binding  in asp.net"  
description: "How to Use AngularJS Table data binding  in asp.net"  
author: "Anonymous User"  
published: 2015-12-16  
updated: 2023-07-03  
canonical: https://www.mindstick.com/forum/33744/how-to-use-angularjs-table-data-binding-in-asp-dot-net  
category: ".net"  
tags: ["asp.net", "jquery", "angular js"]  
reading_time: 3 minutes  

---

# How to Use AngularJS Table data binding  in asp.net

I want to use [AngularJS](https://www.mindstick.com/forum/33926/use-angularjs-without-scope-in-mvc) [Table](https://www.mindstick.com/articles/43918/how-to-design-table-using-bootstrap) databinding in [asp.net](https://www.mindstick.com/articles/934/default-folders-available-inside-the-asp-dot-net-application-folder)

## Replies

### Reply by Aryan Kumar

Sure, here are the steps on how to use Angular JS table databinding in ASP.NET:

1. Add the Angular JS library to your ASP.NET project.
2. Create a view that will display the table.
3. In the view, use Angular JS to create a table.
4. Bind the table to a model.
5. Implement the databinding logic in Angular JS.

Here is an example of the code:

HTML

```plaintext
<!DOCTYPE html>
<html>
<head>
    <title>Table Databinding</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <h1>Table Databinding</h1>

    <div ng-app="myApp">
        <table>
            <tr ng-repeat="record in records">
                <td>{{record.name}}</td>
                <td>{{record.address}}</td>
            </tr>
        </table>
    </div>

    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller("MyController", function($scope) {
        $scope.records = [
            {
                name: "John Doe",
                address: "123 Main Street"
            },
            {
                name: "Jane Doe",
                address: "456 Elm Street"
            },
            {
                name: "Bill Smith",
                address: "789 Oak Street"
            }
        ];
    });
    </script>
</body>
</html>
```

This code will add the Angular JS library to your ASP.NET project. The `records` variable will be used to store the records that will be displayed in the table.

The `MyController` controller will be used to initialize the Angular JS application and bind the table to the `records` variable.

The `ng-repeat` directive will be used to iterate through the records and display them in the table.

I hope this helps! Let me know if you have any other questions.

Here are some additional things to keep in mind when using Angular JS table databinding:

- The table can be anything. It can be a simple table, or it can be a more complex table with sortable columns, filterable rows, and other features.
- The records can be anything. They can be a list of objects, or they can be a collection of data from a database.
- The databinding logic can be implemented in any way that you want. You can use a simple string binding, or you can use a more complex binding that uses expressions and filters.

### Reply by Anonymous User

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily

```
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AngularJs.aspx.cs" Inherits="Forumasp.AngularJs" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>        <script src="Scripts/jquery-2.1.4.js"></script>    <script src="Scripts/angular.min.js"></script>    <style>   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-app = "mainApp" ng-controller = "studentController">                  <table border = "0">                         <tr>                <td>                  <table>                     <tr>                        <th>Subject Name</th>                        <th>Marks</th>                     </tr>                                          <tr ng-repeat = "subject in student.subjects">                        <td>{{ subject.name }}</td>                        <td>{{ subject.marks }}</td>                     </tr>                         </table>               </td>                 </tr>         </table>               </div>            <script>          var mainApp = angular.module("mainApp", []);          mainApp.controller('studentController', function ($scope) {              $scope.student = {                                   subjects: [                     { name: 'Physics', marks: 70 },                     { name: 'Chemistry', marks: 80 },                     { name: 'Math', marks: 65 },                     { name: 'English', marks: 75 },                     { name: 'Hindi', marks: 67 }                  ],                                 };          });      </script></body></html>
```

![How to Use AngularJS Table data binding  in asp.net](https://www.mindstick.com/mindstickforums/0df7a961-3dc8-48c7-8501-2063e022ca30/images/6a06c284-3259-4a09-a013-63fd34e22688.png)


---

Original Source: https://www.mindstick.com/forum/33744/how-to-use-angularjs-table-data-binding-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
