如何在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 . **您好，我无法格式化页面加载格式上显示的电话号码，格式应为“ 123-456-7890”，我尝试了不同的方案，但没有得到。 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>

** **

Answer 1

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

Answer 2

You need to use an element in the link function, and then change text like this: 您需要在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);     
        }
      }
  });

Also, there should be snake-casing format instead of camelCasing one in the markup: 另外，在标记中应该使用蛇形外壳格式而不是驼峰式外壳格式：

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

Answer 3

https://jsfiddle.net/x443m0ye/ 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>

如何在angualrjs中格式化电话号码？

问题描述

3 个解决方案

解决方案1
0 2015-12-03 03:40:29

解决方案2
0 2015-12-03 03:56:29

解决方案3
0 已采纳 2015-12-03 04:02:10

如何在angualrjs中格式化电话号码？

问题描述

3 个解决方案

解决方案1 0 2015-12-03 03:40:29

解决方案2 0 2015-12-03 03:56:29

解决方案3 0 已采纳 2015-12-03 04:02:10

解决方案1
0 2015-12-03 03:40:29

解决方案2
0 2015-12-03 03:56:29

解决方案3
0 已采纳 2015-12-03 04:02:10