how to format the phone number in angualrjs?

Question

**Hi i am not able to format the phone number with is displaying on pageload format should be "123-456-7890" i tried different scenario but not getting . can any one help me regarding this.

angular.module("smbApp")
  .directive("controlDeviceSummary", function(){
    return {
      restrict: 'E',
      templateUrl: 'templates/device_summary.template',
      controller: 'DeviceSummaryCtrl'
    }

        .directive("formatPhone",function(){
            return{
                link:function (scope, element, attr){
                     var phoneforamt= function(value){
                          var value = value.replace(/(\d{3})(\d{3})(\d{4})/);
                     }
                }
            }
        })
  });

 <tbody>
                    <tr ng-repeat="detail in details track by $index">
                        <td><a href="#">{{detail.firstName}},&nbsp;{{detail.lastName}}</a></td>
                        <td><a href="#" formatPhone >{{detail.mobileNumber}}</a></td>
                     </tr>

                    </tbody>

**

You should turn formatPhone into a filter, and simply pipe it in your handlebars like ```{{ detail.mobileNumber | formatPhone }}```. Here is a question regarding that: http://stackoverflow.com/questions/12700145/format-telephone-and-credit-card-numbers-in-angularjs — la1ch3, Dec 03 '15 at 03:36
what are you going to do with `var value` after calling the replace(). It seems not being used anywhere. — domino_katrino, Dec 03 '15 at 03:39

score 0 · Answer 1 · answered Dec 03 '15 at 03:40

Try this:

var newVal = /(\d{3})(\d{3})(\d{4})/.exec(value); //returns an array filled with required values. Index 0 contains original value.
newVal.splice(0,1);  //remove original value.
newVal.join("-");  //join the values with required separator ('-').

score 0 · Answer 2 · answered Dec 03 '15 at 03:56

You need to use an element in the link function, and then change text like this:

angular.module("smbApp")
  .directive("controlDeviceSummary", function(){
     return {
       restrict: 'E',
       templateUrl: 'templates/device_summary.template',
       controller: 'DeviceSummaryCtrl'
  })

 .directive("formatPhone",function(){
    return {
      link:function($scope, element, attr){
          oldNumber = element.text();
          formattedNumber = oldNumber.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3'));
          element.text(formattedNumber);     
        }
      }
  });

Also, there should be snake-casing format instead of camelCasing one in the markup:

<td><a href="#" format-phone>{{detail.mobileNumber}}</a></td>

score 0 · Accepted Answer · answered Dec 03 '15 at 04:02

https://jsfiddle.net/x443m0ye/

angular
  .module('myApp',[])
  .controller('phoneCtrl',function($scope){
     $scope.data = {
        phone:1234567890
      }
 })
  .factory('phoneFormatS',function(){
    return function(value){
        if(typeof value === 'number'){
           value = value + '';
        }else if(typeof value !== 'string'){
          return value;
        }
        return value.replace(/(\d{3})(\d{3})(\d{4})/,"$1-$2-$3");
    }
  })
  .directive('phoneFormatD',function(phoneFormatS){
    return {
      scope:{
        number : '=phoneFormatD'
      },
      link:function(scope,elem,attr){
        scope.$watch('number',function(newValue,oldValue){
          if(typeof newValue === 'undefined') return
          elem.html(phoneFormatS(newValue ));
        })
      }
    }
  })

  .filter('phoneFormatF',function(phoneFormatS){
     return function(number) {
       return phoneFormatS(number);
     } 
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp" ng-controller="phoneCtrl">
   <input type="text" ng-model="data.phone">
   <br>
   <p phone-format-d = "data.phone"> </p>
   <p>{{data.phone | phoneFormatF}}</p>
</body>

how to format the phone number in angualrjs?

3 Answers3