AngularJS Display Precision Decimal Places Using Number Filter

In this AngularJS number filter example you will learn how to display precision decimal places using number filter.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

{{ field | number:2}}

Display Precision Decimal Places Using Number Filter Example

<!DOCTYPE html>          
<html>          
<head> <!-- www.techstrikers.com -->           
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>           
    <meta charset="utf-8">          
    <title>AngularJS Display precision decimal places 
	using number filter Example</title>          
  <script>          
var app = angular.module('app', []);          
    app.controller("ParentController", function ($scope) {  
       
    $scope.employees = [{
        firstName:"Jimi",
        lastName:"Scott",
        jobTitle:"Developer",
        salary:20000.2342,
        phone:"345-333-7845"
      },
      {
          firstName:"Bailey",
          lastName:"Lee",
          jobTitle:"Lead",
          salary:30000.34444,
          phone:"322-121-213"
      },
      {
          firstName:"Aura",
          lastName:"Martin",
          jobTitle:"QA",
          salary:35000.64545,
          phone:"322-333-0987"
      },
      {
          firstName:"Austin",
          lastName:"Williams",
          jobTitle:"Designer",
          salary:20000.344233,
          phone:"322-265-2321"
      },
      {
          firstName:"Bara",
          lastName:"Miller",
          jobTitle:"Tester",
          salary:15000.5343,
          phone:"322-890-2321"
      },{
          firstName:"Carlton",
          lastName:"Taylor",
          jobTitle:"Manager",
          salary:45000.34433,
          phone:"322-456-2321"
      },
      {
          firstName:"Adisa",
          lastName:"White",
          jobTitle:"Developer",
          salary:25000.2323,
          phone:"121-333-2321"
      }];
    });   
</script>          
</head>          
<body style="background-color:#DDE4E9;">          
  <fieldset style="background-color:#DDE4E9;">                      
    <legend>AngulerJS Display precision decimal places 
	using number filter Example</legend>           
  <div ng-app="app">   
    <div ng-controller="ParentController">   
      <ul ng-repeat="emp in employees">
        <li>Name : {{ emp.firstName + ' ' + emp.lastName }}</li>
        <li>Job Title : {{ emp.jobTitle }}</li>
        <li>Salary : {{ emp.salary | number:2}}</li>
        <li>Phone : {{ emp.phone }}</li>
    </ul>
  </div>  
</div>          
</div>          
 </fieldset>           
</body>          
</html>

See Live Example

« Previous