AngularJS Comma Separator

1 Min Read 271 Views
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

<div class="panel panel-primary">  
    <div class="panel-heading">  
        <h3 class="panel-title">AngularJS Comma Separator</h3>  
    </div>  
    <div class="panel-body"> <input type="text" class="form-control" ng-model="textValues" /> </div>  
    <div class='panel-footer'> {{textValues}} </div>  
</div>

AngularJS code

Create Angular module & name it as csharpcor.
var app = angular.module('csharpcor', []);
Module & controller name must assign to the HTML element
app.controller('NgCtrl', function($scope) {
   $scope.TextValues=123456789;
});
Module & controller name must assign to the HTML element
<html ng-app="'csharpcor'" ng-controller="NgCtrl">

Create Angular Directives given below

app.directive('commaseparator', function($filter) {
    'use strict';
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) {
                return;
            }
            ctrl.$formatters.unshift(function() {
                return $filter('number')(ctrl.$modelValue);
            });
            ctrl.$parsers.unshift(function(viewValue) {
                var plainNumber = viewValue.replace(/[\,\.\-\+]/g, ''),
                    b = $filter('number')(plainNumber);
                elem.val(b);
                return plainNumber;
            });
        }
    };
});
Assgin Directive to the input text.
<input type="text" class="form-control" ng-model="textValues" commaseparator />

Output

AngularJS

For source code, refer to the link.

Tags: