Thursday 25 February 2016

Angularjs Filter

 
HTML
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Angularjs/angular.js"></script>
    <script src="Script/Angularjsfilter.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController" style="font-family:Verdana;">
        Increase the no of record<input type="number" min="0" max="6" ng-model="next" />
        <br />
        <table border="1" cellpadding="6px" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        DOB
                    </th>
                    <th>
                        Age
                    </th>
                    <th>
                        Gender
                    </th>
                    <th>
                        Salary(Number)
                    </th>
                    <th>
                        Salary
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees|limitTo:next">
                    <td>{{employee.name|uppercase}}</td>
                    <td>{{employee.DOB|date:"dd/MM/yyyy"}}</td>
                    <td>{{employee.Age}}</td>
                    <td>{{employee.Gender|lowercase}}</td>
                    <td>{{employee.salary|number:2}}</td>
                    <td>{{employee.salary|currency:"":1}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
JS
/// <reference path="../Angularjs/angular.js" />
var app = angular.module("myApp", [])
                 .controller("myController", function ($scope) {
                     var employees = [
                         { name: "Ranjeet", DOB: new Date("February 19 1993"), Age: "22", Gender: "Male", salary: "16000.780" },
                         { name: "Abhishek", DOB: new Date("April 01 1992"), Age: "23", Gender: "Male", salary: "20000" },
                         { name: "Pradeep", DOB: new Date("January 25 1992"), Age: "23", Gender: "Male", salary: "25000" },
                         { name: "Munna", DOB: new Date("February 19 1993"), Age: "23", Gender: "Male", salary: "30000" },
                         { name: "Akash", DOB: new Date("March 19 1993"), Age: "23", Gender: "Male", salary: "40000.500" }
                     ];
                     $scope.employees = employees;
                     $scope.next = 1;
                 })

No comments:

Post a Comment