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