Menu ▼


AngularJS number filter example

AngularJS number filter will return string by formatting the given number.

Example:
  • Input number :
  • Default number filter -> {{ inputnumber | number }}
    {{ inputnumber | number }}
  • Number filter with fractions :
    {{ inputnumber | number : inputfractions }}
    {{inputnumber | number : inputfractions}}
  • For negative number -> {{ -inputnumber | number }}
    {{-inputnumber | number}}

Source code:
<!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>
    <title></title>
    <style type="text/css">
        .exmpul span
        {
            padding: 5px;
            display: block;
            background: #ccc;
            margin: 10px 10px 20px 10px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
        <ul class="exmpul">
            <li>Input number :
                <input type="text" ng-model="inputnumber" />
        </ul>
        <ul class="exmpul">
            <li>Default number filter -> <strong>{{ <em>inputnumber | number</em> }}</strong>
                <br />
                <span>{{ inputnumber | number }}</span> </li>
        </ul>
        <ul class="exmpul">
            <li>Number filter with fractions :
                <input type="text" ng-model="inputfractions" />
                <br />
                <strong>{{ <em>inputnumber | number : inputfractions</em> }}</strong>
                <br />
                <span>{{inputnumber | number : inputfractions}}</span> </li>
        </ul>
        <ul class="exmpul">
            <li>For negative number -> <strong>{{ <em>-inputnumber | number</em>
                }}</strong>
                <br />
                <span>{{-inputnumber | number}}</span> </li>
        </ul>
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.inputnumber = 48643589.456542;
            $scope.inputfractions = 2;
        });
    </script>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com