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.