Home > DeveloperSection > Forums > How to Use AngularJS Table data binding in asp.net
Ankit Singh

Total Post:341

Points:2389
Posted on    December-16-2015 9:22 PM

 .NET ASP.Net  JQuery  Angular JS 
Ratings:


 1 Reply(s)
 955  View(s)
Rate this:
I want to use  AngularJS Table databinding in asp.net


aditya kumar Patel

Total Post:244

Points:1736
Posted on    December-16-2015 9:29 PM

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>


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

Follow MindStick