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>

No comments:

Post a Comment

STEPS TO SAVE YOUR EYES WHILE WORKING ON COMPUTER

STEPS TO SAVE YOUR EYES WHILE WORKING ON COMPUTER This is the report for all you people who works more and more on computer for long t...