Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

AnguarJS Recipe - Part 2

Article:
Viewed:  816 
Posted On:  22/04/2015 10:22:10 
This is the continuation of my previous article. AnguarJS Recipe - Part 1  

 

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>

11.png

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>
 

12.png

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:"&euro;"  }}</p>
            <p><b>Total Cost Of your Order:</b> {{ Product * Cost | currency:"&#8377;"  }}</p>
        </div>
    </form>
</body>
</html>

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

13.png

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>

14.png

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>

15.png

Image 15.

16.png

Image 16.

17.png

Image 17.

18.png

Image 18.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us