▼

Tuesday 29 November 2016

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>
-

1 comment:

  1. Bhuvana21 October 2018 at 18:40

    Expected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition. We are providing AngularJs training in velachry.
    For more details: AngularJs training in velachery

    ReplyDelete