Post
Ask Question

Allow Numbers And Decimal Values In AngularJS Filter

Html design
  1. <!doctype html>  
  2. <html ng-app>  
  3.   
  4. <head>  
  5.     <title>My Angular App</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.     <div ng-app="myApp">  
  11.         <h2>Validate Price</h2>  
  12.         <div ng-controller="MainCtrl"> <input type="text" ng-model="salary" valid-number /> </div>  
  13.     </div>  
  14. </body>  
  15.   
  16. </html>  
Angular File
  1. var app = angular.module('myApp', []);  
  2. app.controller('MainCtrl', function($scope) {});  
  3. app.directive('validNumber', function() {  
  4.     return {  
  5.         require: '?ngModel',  
  6.         link: function(scope, element, attrs, ngModelCtrl) {  
  7.             if (!ngModelCtrl) {  
  8.                 return;  
  9.             }  
  10.             ngModelCtrl.$parsers.push(function(val) {  
  11.                 if (angular.isUndefined(val)) {  
  12.                     var val = '';  
  13.                 }  
  14.                 var clean = val.replace(/[^0-9\.]/g, '');  
  15.                 var decimalCheck = clean.split('.');  
  16.                 if (!angular.isUndefined(decimalCheck[1])) {  
  17.                     decimalCheck[1] = decimalCheck[1].slice(0, 2);  
  18.                     clean = decimalCheck[0] + '.' + decimalCheck[1];  
  19.                 }  
  20.                 if (val !== clean) {  
  21.                     ngModelCtrl.$setViewValue(clean);  
  22.                     ngModelCtrl.$render();  
  23.                 }  
  24.                 return clean;  
  25.             });  
  26.         }  
  27.     };  
  28. });