Articles → ANGULAR.JS → Filters in angular.js

Filters in angular.js





FilterDescription
UppercaseChange the string to upper case
LowercaseChange the string to lowercase
CurrencyPrefixed dollar ($) with the string or number
orderBySort array.
FilterFilters data





uppercase and lowercase




<div ng-app="">
        Convert my string to upper and lowercase   
        <input type="text" ng-model="Name" /><br />
        UpperCase:{{Name | uppercase}}<br />
        LowerCase:{{Name | lowercase}}<br />       
</div>





Click to Enlarge

Currency




<div ng-app="">
        Please enter the expense  <input type="text" ng-model="expense" /><br />
        Expense:{{expense | currency}}<br />
</div>





Click to Enlarge


orderBy




<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('myController', function ($scope) {
            $scope.Fruits = [
                       { Name: "Banana", Price: 12 },
                       { Name: "Apple", Price: 14 },
                       { Name: "Orange", Price: 13 }
                      ];
        }
            );
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div ng-app="app" ng-controller="myController">
        <ul>
            <li ng-repeat="fruit in Fruits|orderBy:'Price'">{{fruit.Name}}</li>
        </ul>
    </div>
    </form>
</body>
</html>







Click to Enlarge


filter




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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('myController', function ($scope) {
            $scope.Fruits = [
                       { Name: "Banana", Price: 12 },
                       { Name: "Apple", Price: 14 },
                       { Name: "Orange", Price: 13 }
                      ];
        }
            );
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div ng-app="app" ng-controller="myController">
        <input type="text" ng-model="filterFruits" />
        <br />
        <ul>
            <li ng-repeat="fruit in Fruits | filter: filterFruits">{{fruit.Name}} </li>
        </ul>
    </div>
    </form>
</body>
</html>





Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Thursday, July 02, 2015

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250