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

<div class="panel panel-primary">  
    <div class="panel-heading">  
        <h3 class="panel-title">AngularJS Comma Separator</h3>  
    <div class="panel-body"> <input type="text" class="form-control" ng-model="textValues" /> </div>  
    <div class='panel-footer'> {{textValues}} </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) {
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) {
            ctrl.$formatters.unshift(function() {
                return $filter('number')(ctrl.$modelValue);
            ctrl.$parsers.unshift(function(viewValue) {
                var plainNumber = viewValue.replace(/[\,\.\-\+]/g, ''),
                    b = $filter('number')(plainNumber);
                return plainNumber;
Assgin Directive to the input text.
<input type="text" class="form-control" ng-model="textValues" commaseparator />



For source code, refer to the link.

Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and to learn new technologies.