如何在angularjs中格式化电话号码？答案

【问题标题】：how to format the phone number in angualrjs?如何在angularjs中格式化电话号码？
【发布时间】：2016-03-07 12:52:13
【问题描述】：

**嗨，我无法格式化页面加载上显示的电话号码格式应该是“123-456-7890”我尝试了不同的场景但没有得到。任何人都可以帮助我解决这个问题。

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>

【问题讨论】：

你应该把 formatPhone 变成一个过滤器，然后像{{ detail.mobileNumber | formatPhone }} 这样简单地把它放在你的车把里。这是一个关于此的问题：stackoverflow.com/questions/12700145/…
在调用 replace() 之后，你打算如何处理 var value。它似乎没有在任何地方使用。

标签： javascript angularjs

【解决方案1】：

试试这个：

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 ('-').

【讨论】：

【解决方案2】：

您需要在link 函数中使用一个元素，然后像这样更改文本：

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);     
        }
      }
  });

此外，标记中应该有蛇形格式而不是骆驼式：

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

【讨论】：

【解决方案3】：

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>

【讨论】：