Post
Ask Question

AngularJs ng-repeat Example

Angular js URL:
  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
Html tag: 
  1. <div ng-app="myApp" ng-controller="myCntrl">  
  2.         <table>  
  3.             <thead>  
  4.                 <tr>  
  5.                     <th>  
  6.                         Emp Code.  
  7.                     </th>  
  8.                     <th>  
  9.                         Employee Name  
  10.                     </th>  
  11.                     <th>  
  12.                         Pan No  
  13.                     </th>  
  14.                        
  15.                 </tr>  
  16.             </thead>  
  17.             <tr ng-repeat="student in EmployeeList">  
  18.                 <td ng-bind="student.StudentID">  
  19.                 </td>  
  20.                 <td ng-bind="student.StudentName">  
  21.                 </td>  
  22.                 <td ng-bind="student.PanNO">  
  23.                 </td>  
  24.                    
  25.             </tr>  
  26.         </table>  
  27.     </div>  
Angular js Script :
  1. <script>  
  2.        var app = angular.module("myApp", []);  
  3.        app.controller("myCntrl", function ($scope, $http) {  
  4.   
  5.            $scope.fillList = function () {  
  6.                $scope.EmployeeName = "";  
  7.                var httpreq = {  
  8.                    method: 'POST',  
  9.                    url: 'Default2.aspx/GetList',  
  10.                    headers: {  
  11.                        'Content-Type': 'application/json; charset=utf-8',  
  12.                        'dataType': 'json'  
  13.                    },  
  14.                    data: {}  
  15.                }  
  16.                $http(httpreq).success(function (response) {  
  17.                    $scope.EmployeeList = response.d;  
  18.                })  
  19.            };  
  20.            $scope.fillList();  
  21.        });  
  22.    </script>  
Asp.net Cs page code: 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data.SqlClient;  
  4. using System.Data;  
  5.   
  6. public partial class Default2 : System.Web.UI.Page  
  7. {  
  8.     protected void Page_Load(object sender, EventArgs e)  
  9.     {  
  10.   
  11.     }  
  12.     [System.Web.Services.WebMethod()]  
  13.     public static List<Employee> GetList()  
  14.     {  
  15.         List<Employee> names = new List<Employee>();  
  16.         DataSet ds = new DataSet();  
  17.         using (SqlConnection con = new SqlConnection(@"Data Source=140.175.165.10;Initial Catalog=Payroll_290716;user id=sa;password=Goal@12345;"))  
  18.         {  
  19.             using (SqlCommand cmd = new SqlCommand())  
  20.             {  
  21.                 cmd.Connection = con;  
  22.                 cmd.CommandText = "select EmpId,Empcode, name,PanNo from EMPLOYEEMASTER  order by Name;";  
  23.                 using (SqlDataAdapter da = new SqlDataAdapter(cmd))  
  24.                 {  
  25.                     da.Fill(ds);  
  26.                 }  
  27.             }  
  28.         }  
  29.         if (ds != null && ds.Tables.Count > 0)  
  30.         {  
  31.             foreach (DataRow dr in ds.Tables[0].Rows)  
  32.                 names.Add(new Employee(int.Parse(dr["EmpId"].ToString()), dr["name"].ToString(), dr["PanNo"].ToString()));  
  33.         }  
  34.         return names;  
  35.     }  
  36. }  
  37. public class Employee  
  38. {  
  39.     public int StudentID;  
  40.     public string StudentName;  
  41.     public string PanNO;  
  42.     public Employee(int _StudentID, string _StudentName, string _PanNO)  
  43.     {  
  44.         StudentID = _StudentID;  
  45.         StudentName = _StudentName;  
  46.         PanNO = _PanNO;  
  47.     }  
  48. }   
Whole HTML page: 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div ng-app="myApp" ng-controller="myCntrl">  
  12.         <table>  
  13.             <thead>  
  14.                 <tr>  
  15.                     <th>  
  16.                         Emp Code.  
  17.                     </th>  
  18.                     <th>  
  19.                         Employee Name  
  20.                     </th>  
  21.                     <th>  
  22.                         Pan No  
  23.                     </th>  
  24.                        
  25.                 </tr>  
  26.             </thead>  
  27.             <tr ng-repeat="student in EmployeeList">  
  28.                 <td ng-bind="student.StudentID">  
  29.                 </td>  
  30.                 <td ng-bind="student.StudentName">  
  31.                 </td>  
  32.                 <td ng-bind="student.PanNO">  
  33.                 </td>  
  34.                    
  35.             </tr>  
  36.         </table>  
  37.     </div>  
  38.     <script>  
  39.         var app = angular.module("myApp", []);  
  40.         app.controller("myCntrl", function ($scope, $http) {  
  41.   
  42.             $scope.fillList = function () {  
  43.                 $scope.EmployeeName = "";  
  44.                 var httpreq = {  
  45.                     method: 'POST',  
  46.                     url: 'Default2.aspx/GetList',  
  47.                     headers: {  
  48.                         'Content-Type': 'application/json; charset=utf-8',  
  49.                         'dataType': 'json'  
  50.                     },  
  51.                     data: {}  
  52.                 }  
  53.                 $http(httpreq).success(function (response) {  
  54.                     $scope.EmployeeList = response.d;  
  55.                 })  
  56.             };  
  57.             $scope.fillList();  
  58.         });  
  59.     </script>  
  60.     </form>  
  61. </body>  
  62. </html>