AngularJS ng-grid 手机格式答案

【问题标题】：AngularJS ng-grid Phone formatAngularJS ng-grid 手机格式
【发布时间】：2015-02-25 15:26:17
【问题描述】：

希望有人会遇到这种情况，使用ng-grid 组件来显示数据。

其中一列是电话号码。有没有更简单的方法将电话格式化为 (123)-123-1234。

ng-grid 代码如下所示，

 $scope.gridOptions = { data:'records',
        enableRowSelection:false,
        filterOptions: $scope.filterOptions,
        columnDefs:[
            {field:'phoneNumber', displayName:'Phone', width:80} 
        ]};

【问题讨论】：

标签： javascript angularjs ng-grid phonejs

【解决方案1】：

将 phonenumber 字段末尾的 } 替换为以下内容

, cellTemplate: " ({{row.getProperty(col.field).substr(0, 3)}}) {{row.getProperty(col.field).substr(3, 3)}} - {{ row.getProperty(col.field).substr(6,4)}}"

【讨论】：

请format您的答案以提高其可读性。对代码在做什么的任何解释也是有益的。

【解决方案2】：

这是一种有效的解决方案。信息 "row.getProperty(col.field)|phoneNumber", "phoneNumber" 出现在 JSON 字符串中。控制器中的代码对于列是这样的

 $scope.gridOptions = { data:'records',
    enableRowSelection:false,
    filterOptions: $scope.filterOptions,
    columnDefs:[
        {field:'phoneNumber', displayName:'Phone', width:80,cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field)|phoneNumber}}</span></div>'}} 
    ]};

在html文件中加入如下代码sn-p。

<div id="controller" data-ng-controller="controller">
    <div class="gridStyle" ng-grid="gridOptions" width="100%"></div>
</div>
 <script type="text/javascript" src="/common/PhoneFormat.js"></script> 
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js></script> 
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-resource.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
 <script type="text/javascript" src="/common/ng-grid.js"></script>

【讨论】：