如何在angualrjs中格式化電話號碼？

**你好，我無法格式化電話號碼與頁面上顯示格式應該是「123-456-7890」我試過不同的情況，但沒有得到。任何人都可以幫助我解決這個問題。如何在angualrjs中格式化電話號碼？

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>

來源

2015-12-03 surya navuru

你應該把formatPhone到過濾器，並簡單地管它在你的把手像'''{{detail.mobileNumber | formatPhone}}'''。這是一個關於該問題的問題：http://stackoverflow.com/questions/12700145/format-telephone-and-credit-card-numbers-in-angularjs – la1ch3

你打算怎麼用'var value'在調用replace （）。似乎沒有在任何地方使用。 –

**謝謝@ la1ch3 ** –

試試這個：

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

來源

2015-12-03 03:40:29

您需要在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>

來源

2015-12-03 03:56:29 devor

https://jsfiddle.net/x443m0ye/

angular 
 
    .module('myApp',[]) 
 
    .controller('phoneCtrl',function($scope){ 
 
    \t $scope.data = { 
 
     phone:1234567890 
 
     } 
 
\t }) 
 
    .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>

來源

2015-12-03 04:02:10

如何在angualrjs中格式化電話號碼？

回答

相關問題