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:

angular.module('myApp', []).controller('employeeCtrl', function ($scope)
{
$scope.name = "Rahul Saxena",
$scope.City = "Noida",
$scope.Country = "India",
$scope.empInfo = function ()
{
return $scope.name + " " + $scope.City + " " + $scope.Country;
}
});
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="employeeController.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="employeeCtrl">
Name:<input type="text" ng-model="name">
<br>
<br>
City:<input type="text" ng-model="City">
<br>
<br>
Country:<input type="text" ng-model="Country">
<br>
<br>
<b>Employee Information </b>: {{empInfo()}}
</div>
</form>
</body>
</html>

External Controller File using repeat

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

angular.module('myApp', []).controller('employeeCtrl', function ($scope)
{
$scope.Emp_Names = [
{ name: 'Rahul Saxena', country: 'India' },
{ name: 'Shambhu Sharma', country: 'USA' },
{ name: 'Abhishek Nigam', country: 'USA' },
{ name: 'Yogesh Gupta', country: 'USA' },
{ name: 'Rakesh Dixit', country: 'India' },
{ name: 'Manu Khanna', country: 'India' },
{ name: 'Saurabh Mehrotra', country: 'USA' },
{ name: 'mayank Dhulekar', country: 'India' }
];
});
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="employeeController.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="employeeCtrl">
<ul>
<li ng-repeat="x in Emp_Names">{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
</form>
</body>
</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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="" ng-init="Product=5;Cost=20">
<p>
<b>Total Cost Of your Order:</b> {{ Product * Cost | currency }}
</p>
<p>
<b>Total Cost Of your Order:</b> {{ Product * Cost | currency:"€" }}
</p>
<p>
<b>Total Cost Of your Order:</b> {{ Product * Cost | currency:"₹" }}
</p>
</div>
</form>
</body>
</html>

Here by default US currency come but you can format currency symbol:

Order By Filter

My external Controller file:

angular.module('myApp', []).controller('employeeCtrl', function ($scope)
{
$scope.Emp_Names = [
{ name: 'Rahul Saxena', country: 'India' },
{ name: 'Shambhu Sharma', country: 'USA' },
{ name: 'Abhishek Nigam', country: 'USA' },
{ name: 'Yogesh Gupta', country: 'USA' },
{ name: 'Rakesh Dixit', country: 'India' },
{ name: 'Manu Khanna', country: 'India' },
{ name: 'Saurabh Mehrotra', country: 'USA' },
{ name: 'mayank Dhulekar', country: 'India' }];
});
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="employeeController.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="employeeCtrl">
<ul>
<li ng-repeat="x in Emp_Names | orderBy:'country'">{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
</form>
</body>
</html>

Filter By Taking User input

My external Controller file:

angular.module('myApp', []).controller('employeeCtrl', function ($scope)
{
$scope.Emp_Names = [
{ name: 'Rahul Saxena', country: 'India' },
{ name: 'Shambhu Sharma', country: 'USA' },
{ name: 'Abhishek Nigam', country: 'USA' },
{ name: 'Yogesh Gupta', country: 'USA' },
{ name: 'Rakesh Dixit', country: 'India' },
{ name: 'Manu Khanna', country: 'India' },
{ name: 'Saurabh Mehrotra', country: 'USA' },
{ name: 'mayank Dhulekar', country: 'India' }
];
});
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="employeeController.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="employeeCtrl">
<p>Enter Text To Search:<input type="text" ng-model="textToSearch"></p>
<ul>
<li ng-repeat="x in Emp_Names | filter:textToSearch | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li>
</ul>
</div>
</form>
</body>
</html>

10 Comments

Join the conversation! Your thoughts help the community grow.

Rahul Kumar Saxena11y ago
Thanks Sibeesh Venu...
Sibeesh Venu11y ago
Article OF The Day. Congrats
Rahul Kumar Saxena11y ago
Thanks Sanjay Kumar...
Rahul Kumar Saxena11y ago
Thanks Karthik Muthu Karuppan...
Rahul Kumar Saxena11y ago
Thansk Nitin Tyagi...
Sanjay Kumar11y ago
Nice Rahul Saxena
Karthik Muthu Karuppan11y ago
Good one
Nitin11y ago
nice
Rahul Kumar Saxena11y ago
Thanks Santhakumar Munuswamy...
Santhakumar Munuswamy11y ago
Good work