HOW TO USE ANGULARJS TABLE DATA BINDING IN ASP.NET

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 3278  View(s)
Ratings:
Rate this:
I want to use  AngularJS Table databinding in asp.net
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to Use AngularJS Table databinging in asp.net

    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>

Answer

NEWSLETTER

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