Post
Ask Question

AngularJS Recipe: Part 3

This is the continuation of AngularJS Recipe - Part 2.

AngularJS Recipe: Part 2

# Showing Data in a Table after reading from Controller external File

The following is my external Controlller file.

  1. ngular.module('myApp', []).controller('employeeCtrl', function ($scope) {  
  2.     $scope.Emp_Names = [  
  3.         { name: 'Rahul Saxena', country: 'India' },  
  4.         { name: 'Shambhu Sharma', country: 'USA' },  
  5.         { name: 'Abhishek Nigam', country: 'USA' },  
  6.         { name: 'Yogesh Gupta', country: 'USA' },  
  7.         { name: 'Rakesh Dixit', country: 'India' },  
  8.         { name: 'Manu Khanna', country: 'India' },  
  9.         { name: 'Saurabh Mehrotra', country: 'USA' },  
  10.         { name: 'mayank Dhulekar', country: 'India' }  
  11.     ];  
  12. });  
  13. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  14. <!DOCTYPE html>  
  15. <html xmlns="http://www.w3.org/1999/xhtml">  
  16. <head runat="server">  
  17.     <title></title>  
  18.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  19.     <script src="employeeController.js"></script>  
  20. </head>  
  21. <body>  
  22.     <form id="form1" runat="server">  
  23.         <div ng-app="myApp" ng-controller="employeeCtrl">  
  24.             <table style="border:1px solid;" border="1">  
  25.                 <tr ng-repeat="x in Emp_Names">  
  26.                     <td style="width:200px;">{{ x.name }}</td>  
  27.                     <td style="width:200px;">{{ x.country }}</td>  
  28.                 </tr>  
  29.             </table>              
  30.         </div>  
  31.     </form>  
  32. </body>  
  33. </html>  


# Showing Record from External Controller File in a Table with CSS style sheet:

The following is my external Controlller file.
  1. angular.module('myApp', []).controller('employeeCtrl', function ($scope) {  
  2.     $scope.Emp_Names = [  
  3.         { name: 'Shambhu Sharma', country: 'USA' },  
  4.         { name: 'Rahul Saxena', country: 'India' },          
  5.         { name: 'Abhishek Nigam', country: 'USA' },  
  6.         { name: 'Shraddha Gaur', country: 'India' },  
  7.         { name: 'Shweta Kashyap', country: 'India' },  
  8.         { name: 'Yogesh Gupta', country: 'USA' },  
  9.         { name: 'Rakesh Dixit', country: 'India' },  
  10.         { name: 'Manu Khanna', country: 'India' },  
  11.         { name: 'Saurabh Mehrotra', country: 'USA' },  
  12.         { name: 'Mayank Dhulekar', country: 'USA' },  
  13.         { name: 'Akhilesh Atwal', country: 'India' }  
  14.     ];  
  15. });  
  16. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  17.   
  18. <!DOCTYPE html>  
  19. <html xmlns="http://www.w3.org/1999/xhtml">  
  20. <head runat="server">  
  21.     <title></title>  
  22.     <style>  
  23.         table, th, td {  
  24.             border: 1px solid grey;  
  25.             border-collapse: collapse;  
  26.             padding: 5px;  
  27.         }  
  28.           table tr:nth-child(odd) {  
  29.                 background-color: red;  
  30.                   color:yellow;  
  31.                   font-family:Verdana;  
  32.             }  
  33.            table tr:nth-child(even) {  
  34.                 background-color: blue;  
  35.                 color:white;  
  36.                 font-family:Arial;  
  37.             }  
  38.     </style>  
  39.    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  40.     <script src="employeeController.js"></script>  
  41. </head>  
  42. <body>  
  43.     <form id="form1" runat="server">  
  44.         <div ng-app="myApp" ng-controller="employeeCtrl">  
  45.             <table style="border: 1px solid;" border="1">  
  46.                 <tr ng-repeat="x in Emp_Names">  
  47.                     <td style="width: 200px;">{{ x.name }}</td>  
  48.                     <td style="width: 200px;">{{ x.country }}</td>  
  49.                 </tr>  
  50.             </table>  
  51.         </div>  
  52.     </form>  
  53. </body>  
  54. </html>  


# Showing Records In a Table with Index Value:

The following is my external Controlller file.
  1. angular.module('myApp', []).controller('employeeCtrl', function ($scope) {  
  2.     $scope.Emp_Names = [  
  3.         { name: 'Shambhu Sharma', country: 'USA' },  
  4.         { name: 'Rahul Saxena', country: 'India' },          
  5.         { name: 'Abhishek Nigam', country: 'USA' },  
  6.         { name: 'Shraddha Gaur', country: 'India' },  
  7.         { name: 'Shweta Kashyap', country: 'India' },  
  8.         { name: 'Yogesh Gupta', country: 'USA' },  
  9.         { name: 'Rakesh Dixit', country: 'India' },  
  10.         { name: 'Manu Khanna', country: 'India' },  
  11.         { name: 'Saurabh Mehrotra', country: 'USA' },  
  12.         { name: 'Mayank Dhulekar', country: 'USA' },  
  13.         { name: 'Akhilesh Atwal', country: 'India' }  
  14.     ];  
  15. });  
  16. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  17.   
  18. <!DOCTYPE html>  
  19. <html xmlns="http://www.w3.org/1999/xhtml">  
  20. <head runat="server">  
  21.     <title></title>  
  22.     <style>  
  23.         table, th, td {  
  24.             border: 1px solid grey;  
  25.             border-collapse: collapse;  
  26.             padding: 5px;  
  27.         }  
  28.          table tr:nth-child(odd) {  
  29.                 background-color: red;  
  30.                 color: yellow;  
  31.                 font-family: Verdana;  
  32.             }  
  33.          table tr:nth-child(even) {  
  34.                 background-color: blue;  
  35.                 color: white;  
  36.                 font-family: Arial;  
  37.             }  
  38.     </style>  
  39.   
  40.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  41.     <script src="employeeController.js"></script>  
  42. </head>  
  43. <body>  
  44.     <form id="form1" runat="server">  
  45.         <div ng-app="myApp" ng-controller="employeeCtrl">  
  46.             <table style="border: 1px solid;" border="1">  
  47.                 <tr ng-repeat="x in Emp_Names">  
  48.                     <td>{{ $index + 1 }}</td>  
  49.                     <td style="width: 180px;">{{ x.name }}</td>  
  50.                     <td style="width: 180px;">{{ x.country }}</td>  
  51.                 </tr>  
  52.             </table>  
  53.         </div>  
  54.     </form>  
  55. </body>  
  56. </html>  


# using if condition in AngularJS With Even and Odd in a Table

The following is my external Controlller file.
  1. ngular.module('myApp', []).controller('employeeCtrl', function ($scope) {  
  2.     $scope.Emp_Names = [  
  3.         { name: 'Shambhu Sharma', country: 'USA' },  
  4.         { name: 'Rahul Saxena', country: 'India' },          
  5.         { name: 'Abhishek Nigam', country: 'USA' },  
  6.         { name: 'Shraddha Gaur', country: 'India' },  
  7.         { name: 'Shweta Kashyap', country: 'India' },  
  8.         { name: 'Yogesh Gupta', country: 'USA' },  
  9.         { name: 'Rakesh Dixit', country: 'India' },  
  10.         { name: 'Manu Khanna', country: 'India' },  
  11.         { name: 'Saurabh Mehrotra', country: 'USA' },  
  12.         { name: 'Mayank Dhulekar', country: 'USA' },  
  13.         { name: 'Akhilesh Atwal', country: 'India' }  
  14.     ];  
  15. });  
  16. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  17.   
  18. <!DOCTYPE html>  
  19. <html xmlns="http://www.w3.org/1999/xhtml">  
  20. <head runat="server">  
  21.     <title></title>  
  22.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  23.     <script src="employeeController.js"></script>  
  24. </head>  
  25. <body>  
  26.     <form id="form1" runat="server">  
  27.         <div ng-app="myApp" ng-controller="employeeCtrl">  
  28.             <table style="border: 1px solid;" border="1">  
  29.                 <tr ng-repeat="x in Emp_Names">  
  30.                     <td ng-if="$odd" style="background-color: #1E90FF; width: 190px;">{{ x.name }}</td>  
  31.                     <td ng-if="$even" style="background-color: #FF00FF; width: 190px;">{{ x.name }}</td>  
  32.                     <td ng-if="$odd" style="background-color: #FF4500; width: 190px;">{{ x.country }}</td>  
  33.                     <td ng-if="$even" style="background-color: #9ACD32; width: 190px;">{{ x.country }}</td>  
  34.                 </tr>  
  35.             </table>  
  36.         </div>  
  37.     </form>  
  38. </body>  
  39. </html>  

# Make disable button on ChecBox Click

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>       
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.         <div ng-app="">  
  11.             <p>  
  12.                 <button ng-disabled="mySwitchClick">Submit</button>  
  13.             </p>  
  14.             <p>  
  15.                 <input type="checkbox" ng-model="mySwitchClick">Make Button Enable/Disable  
  16.             </p>  
  17.         </div>  
  18.     </form>  
  19. </body>  
  20. </html>  


 


Similar Articles