Post
Ask Question

AngularJS Comma Separator

In this blog, I will demonstrate input textbox, set comma separator, using AngularJS and most useful for quantity and countable input text.

HTML code

I have designed simple input type Text in HTML,.using AngularJS

  1. <div class="panel panel-primary">  
  2.     <div class="panel-heading">  
  3.         <h3 class="panel-title">AngularJS Comma Separator</h3>  
  4.     </div>  
  5.     <div class="panel-body"> <input type="text" class="form-control" ng-model="textValues" /> </div>  
  6.     <div class='panel-footer'> {{textValues}} </div>  
  7. </div>  

AngularJS code

Create Angular module & name it as csharpcor.
  1. var app = angular.module('csharpcor', []);
Module & controller name must assign to the HTML element
  1. app.controller('NgCtrl', function($scope) {
  2.    $scope.TextValues=123456789;
  3. });
Module & controller name must assign to the HTML element
  1. <html ng-app="'csharpcor'" ng-controller="NgCtrl">
Create Angular Directives given below
  1. app.directive('commaseparator', function($filter) {  
  2.     'use strict';  
  3.     return {  
  4.         require: 'ngModel',  
  5.         link: function(scope, elem, attrs, ctrl) {  
  6.             if (!ctrl) {  
  7.                 return;  
  8.             }  
  9.             ctrl.$formatters.unshift(function() {  
  10.                 return $filter('number')(ctrl.$modelValue);  
  11.             });  
  12.             ctrl.$parsers.unshift(function(viewValue) {  
  13.                 var plainNumber = viewValue.replace(/[\,\.\-\+]/g, ''),  
  14.                     b = $filter('number')(plainNumber);  
  15.                 elem.val(b);  
  16.                 return plainNumber;  
  17.             });  
  18.         }  
  19.     };  
  20. });  
Assgin Directive to the input text.
  1. <input type="text" class="form-control" ng-model="textValues" commaseparator />
Output

AngularJS

For source code, refer to the link.
Next Recommended Reading AngularJS Compilation Process