[英]AngularJS ng-grid Phone format
Hoping this would be something someone would have encountered, using the ng-grid
component for displaying data. 希望这可能是某人遇到的事情,使用
ng-grid
组件来显示数据。
One of the column is a phone number. 其中一列是电话号码。 Is there an easier way to format phone as (123)-123-1234.
是否有更简单的方法将手机格式化为(123)-123-1234。
The ng-grid
code looks like this, ng-grid
代码看起来像这样,
$scope.gridOptions = { data:'records',
enableRowSelection:false,
filterOptions: $scope.filterOptions,
columnDefs:[
{field:'phoneNumber', displayName:'Phone', width:80}
]};
Replace the }, at the end of the phonenumber field with the following 用以下内容替换phonenumber字段末尾的}
, cellTemplate: " ({{row.getProperty(col.field).substr(0, 3)}}) {{row.getProperty(col.field).substr(3, 3)}} - {{row.getProperty(col.field).substr(6,4)}}" ,cellTemplate:“({{row.getProperty(col.field).substr(0,3)}}){{row.getProperty(col.field).substr(3,3)}} - {{row.getProperty (col.field).substr(6,4)}}”
Here is one solution that worked. 这是一个有效的解决方案。 the information "row.getProperty(col.field)|phoneNumber", "phoneNumber " is coming in the JSON string.
信息“row.getProperty(col.field)| phoneNumber”,“phoneNumber”将出现在JSON字符串中。 The code in controller goes something like this for the column
控制器中的代码对于列来说是这样的
$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>'}}
]};
In the html file the following code snippet. 在html文件中有以下代码片段。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.