Post
Ask Question

AngularJS Recipe: Part 2

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:
  • Currency.
  • Filter.
  • Lowercase.
  • Order By.
  • Uppercase.

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>   







Similar Articles