lThis is the continuation of AnguarJS Recipe: Part 1.

Making Controller in External File

Make a new JavaScript file named employeeController.js with the following code:

  1. angular.module('myApp', []).controller('employeeCtrl', function ($scope)
  2. {
  3. $scope.name = "Rahul Saxena",
  4. $scope.City = "Noida",
  5. $scope.Country = "India",
  6. $scope.empInfo = function ()
  7. {
  8. return $scope.name + " " + $scope.City + " " + $scope.Country;
  9. }
  10. });
  11. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
  12. <!DOCTYPE html>
  13. <html
  14. xmlns="http://www.w3.org/1999/xhtml">
  15. <head runat="server">
  16. <title></title>
  17. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  18. <script src="employeeController.js"></script>
  19. </head>
  20. <body>
  21. <form id="form1" runat="server">
  22. <div ng-app="myApp" ng-controller="employeeCtrl">
  23. Name:<input type="text" ng-model="name">
  24. <br>
  25. <br>
  26. City:<input type="text" ng-model="City">
  27. <br>
  28. <br>
  29. Country:<input type="text" ng-model="Country">
  30. <br>
  31. <br>
  32. <b>Employee Information </b>: {{empInfo()}}
  33. </div>
  34. </form>
  35. </body>
  36. </html>


External Controller File using repeat

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


Filters in AngularJS

In AnglarJS we have the following filters:

Now we will see examples of all the filters.

Currency Filter

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
  2. <!DOCTYPE html>
  3. <html
  4. 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.15/angular.min.js"></script>
  8. </head>
  9. <body>
  10. <form id="form1" runat="server">
  11. <div ng-app="" ng-init="Product=5;Cost=20">
  12. <p>
  13. <b>Total Cost Of your Order:</b> {{ Product * Cost | currency }}
  14. </p>
  15. <p>
  16. <b>Total Cost Of your Order:</b> {{ Product * Cost | currency:"€" }}
  17. </p>
  18. <p>
  19. <b>Total Cost Of your Order:</b> {{ Product * Cost | currency:"₹" }}
  20. </p>
  21. </div>
  22. </form>
  23. </body>
  24. </html>
Here by default US currency come but you can format currency symbol:



Order By Filter

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


Filter By Taking User input

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