This is the continuation of AnguarJS Recipe - Part 1
http://www.dotnetcodesg.com/Article/UploadFile/2/14408/AnguarJS%20Recipe%20-%20Part%201.aspx
#
Making Controller in External File
Make
a new JS file name as employeeController.js
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>
Image 11.
#
External Controller File using repeat
Add a new JS file name as employeeController.js like
below:
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>
Image 12.
#
Filters in AngularJS
In AnglarJS we have some below filters:
- Currency
- filter
- lowercase
- orderBy
- uppercase
Now we will see all filters by example:
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:
Image 13.
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>
Image 14.
#
Filter By Taking User input:
My
Extaernal 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>
Image 15.
Image 16.
Image 17.
Image 18.