Saturday, June 2, 2018

Angular Js Directive Examples with Filters

Note:
Variables initialized in ng-init are different from the properties defined using ng-model directive. The variables initialized in ng-init are not attached to $scope object whereas ng-model properties are attached to $scope object.

ng-repeat Example


<html>

<head>

    <script src="angular.min.js"></script>



</head>

<body ng-app="" ng-init="students=['a','b','c']">

    <ol>

        <li ng-repeat="name in students">

            {{name}}

        </li>
    </ol>
    <div ng-repeat="name in students">
        {{name}}
    </div>
</body>
</html>


Output:


Angular Js Events:

I want to handle the click Event Now using angular Js


 Example :

 Javascript Code:

 var myapp = angular.module("myapp", [])
            .controller("mycontroller", function ($scope) {
                var employee = [
                     { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad" ,YouHaveClickedMe :0},
                     { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", YouHaveClickedMe: 0 },
                     { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", YouHaveClickedMe: 0 }
                ];
                $scope.employees = employee;
                $scope.ClickedMeEventSelected = function (name)
                {
                    name.YouHaveClickedMe++;
                }

            });


Default

<html>
<head>
    <script src="angular.min.js"></script>
    <script src="MyJavascript.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
    <table>
        <tr ng-repeat="employee in employees">
            <td>{{employee.FirstName}}</td>
            <td>{{employee.LastName}}</td>
            <td>{{employee.Gender}}</td>
            <td>{{employee.Address}}</td>
            <td>{{employee.YouHaveClickedMe}}</td>
            <td>
                <input type="button" value="You Have Clicked Me" ng-click="ClickedMeEventSelected(employee)" />
            </td>
        </tr>
    </table>
</body>
</html>


Output:



AngularJS Filters

Filters are used to format data. Filters can be used with the binding expression or directives


Currency It formats a number to a currency format.

Date It formats a date to a specified format.



Filter It select a subset of items from an array.



Json It formats an object to a Json string.


Limit It is used to limit an array/string, into a specified number of elements/characters.

Lowercase It formats a string to lower case.

Number It formats a number to a string.

Orderby It orders an array by an expression.

Uppercase It formats a string to upper case.


Example : 

Add filters to expressions


We can add filters to expresssion by using pipe character to the expression



Javascript Code:



/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller('mycontroller', function ($scope) {
                $scope.firstName = "RajaKonda Uday",
                $scope.lastName = "Kumar"
});




Default Page:

<html>  
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>  
<div ng-app="myApp" ng-controller="mycontroller">  
<p>My  name is {{ firstName | uppercase }}</p>  
</div>    
</body>  
</html>


Output:


Example 2:

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller('mycontroller', function ($scope) {
                $scope.firstName = "RajaKonda Uday",
                $scope.lastName = "KUMAR"
});

Default Page:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html>  
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>  
<div ng-app="myApp" ng-controller="mycontroller">  
<p>My  name is {{ lastname | lowercase }}</p>  
</div>    
</body>  
</html>


Output:


Add filters to directives


order by filter which is used to sort an Array


Example :

Javascript :



/// <reference path="angular.min.js" />

var myapp = angular.module('myApp', []).controller('mycontroller', function ($scope) {

    $scope.names = [

        { name: 'Z', eno: 1 },

        { name: 'B', eno: 8 },

        { name: 'C', eno: 3},

        { name: 'E', eno: 5 },

        { name: 'Q', eno: 4 },
        { name: 'I', eno: 6 },
        { name: 'P', eno: 7 },
        { name: 'U', eno: 9 },
        { name: 'O', eno: 2 }
    ];
});


Default Page


<html>  
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>  
<div ng-app="myApp" ng-controller="mycontroller">  
<p>Looping with objects:</p>  
<ul>  
  <li ng-repeat="x in names | orderBy:'eno'">  
    {{ x.name + ', ' + x.eno }}  
  </li>  
</ul>  
</div>     
</body>  
</html>

Output:


Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
    var employee = [
         { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
         { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
         { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
         { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
         { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
         { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
    ];
    $scope.employees = employee;
});



Default Page:

<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>DateofBirth(Only Month in Numbers)</th>
                <th>DateofBirth(Only Date in Numbers</th>
                <th>DateofBirth(Only MMMM Format)</th>
                <th>DateofBirth(Only MM Format)</th>
                <th>DateofBirth(Only M Format)</th>
                <th>DateofBirth(Only yy Format)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.DateofBirth | date:"M"}} </td>
                <td>{{ employee.DateofBirth | date:"dd" }} </td>
                <td>{{ employee.DateofBirth | date:"MMMM" }} </td>
                <td>{{ employee.DateofBirth | date:"MM" }} </td>
                <td>{{ employee.DateofBirth | date:"M" }} </td>
                <td>{{ employee.DateofBirth | date:"yy" }} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


output:



Filter Example with display limitNumber of Records
Javascript Code:

 /// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
    var employee = [
         { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
         { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
         { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
         { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
         { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
         { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
    ];
    $scope.employees = employee;
    $scope.rowLimit = 3;

});


Default Page:

<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="number" step="1" min="0" max="5" ng-model="rowLimit" />
        <br/>
        <br />
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>DateofBirth(Only Month in Numbers)</th>
                <th>DateofBirth(Only Date in Numbers</th>
                <th>DateofBirth(Only MMMM Format)</th>
                <th>DateofBirth(Only MM Format)</th>
                <th>DateofBirth(Only M Format)</th>
                <th>DateofBirth(Only yy Format)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees |limitTo:rowLimit">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.DateofBirth | date:"M"}} </td>
                <td>{{ employee.DateofBirth | date:"dd" }} </td>
                <td>{{ employee.DateofBirth | date:"MMMM" }} </td>
                <td>{{ employee.DateofBirth | date:"MM" }} </td>
                <td>{{ employee.DateofBirth | date:"M" }} </td>
                <td>{{ employee.DateofBirth | date:"yy" }} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


Output:
Example :  

The filter Filter

The filter Filter will be used only on arrays because it selects a subset of an array. It returns an array containing only the matching items.


Javascript Code:


/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [  
            'Z',  
            'Pooja',  
            'Mahesh',  
            'Raju',  
            'Mounika',  
            'Robo',  
            'Rajakonda',  
            'Uday',  
            'Kittu'  
         ];  
    $scope.employees = employee;
});
Default page:

 <script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
<ul>  
  <li ng-repeat="x in employees | filter : 'o'">  
    {{ x }}  
  </li>  
</ul>  
</div> 
</body>

</html>

 output:

Filter and Sorting an Array based on User Input:

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [  
            'Z',  
            'Pooja',  
            'Mahesh',  
            'Raju',  
            'Mounika',  
            'Robo',  
            'Rajakonda',  
            'Uday',  
            'Kittu'  
         ];  
    $scope.employees = employee;
});

Default Page:


<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="text" ng-model="findfilter"></p>
<ul>  
  <li ng-repeat="x in employees | filter:findfilter">  
    {{ x }}  
  </li>  
</ul>  
</div> 
</body>
</html>
output:

To sort in the ascending order we need to set the reverse to false

To sort in the descending order , we need to set the reverse to true.

Default  Page:

<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | orderBy:'+FirstName'">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
});


Output:

 Note: + means ascending order, - means descending order
Reverse to true means descending order

<tr ng-repeat="employee in employees | orderBy:'FirstName': true">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>


Now, let me add a drop down, on the dropdown change the selected column needs to be sorted


Default Page:


<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        OrderBy :<select ng-model="sortColumn">
            <option value="FirstName">FirstName Asc</option>
            <option value="-Gender">Gender Desc</option>
            <option value="LastName">LastName Asc</option>
             <option value="-salary">salary desc</option>
        </select>
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | orderBy:sortColumn">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


Javascript Code:


/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
                $scope.sortColumn = "FirstName";
});


Output:

Search based on particular Column


Default Page:


<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="text" ng-model="filtertext.LastName" />
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | filter:filtertext">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
});



Output:


Angular Js filters with Multiple Properties.

Default Page:

<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="text" ng-model="filtertext.LastName"  placeholder="LastName Search"/>
         <input type="text" ng-model="filtertext.Address" placeholder="Address Search"/>
        <input type="checkbox" ng-model="ExactMatch" />
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | filter:filtertext:ExactMatch">
                <td>{{ employee.FirstName }}</td>
                <td>{{ employee.LastName }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


Javascript Code :

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
});


Output:



at

No comments:

Post a Comment

Thank you for visiting my blog

Subscribe to: Post Comments (Atom)

Kubernetes

Prerequisites We assume anyone who wants to understand Kubernetes should have an understating of how the Docker works, how the Docker images...

  • SUPER AGGREGATES IN SQL SERVER
    Super aggregates: Are used to calculate aggregates of aggregates There are two super aggregates functions Roll Up Cube When there is a singl...
  • Solid Priciples
    SOLID principles allows object oriented programming implementation in an  efficient better way into project development      S-->Single R...
  • Working with PDF IN ASP.NET MVC with Entity FrameWork.
    With this example you can create pdf and print pdf. If You are using ASP.NET MVC , PDF can be created by using Rotativa  Rotativa is a ...