Angularjs 在AngularGrid表中动态使用NgMask_Angularjs_Masking_Angular Grid

Angularjs 在AngularGrid表中动态使用NgMask

angularjs

Angularjs 在AngularGrid表中动态使用NgMask,angularjs,masking,angular-grid,Angularjs,Masking,Angular Grid,我想在angularGrid表中使用NgMask来编辑字段，但我不知道如何编辑。表中的信息来自PHP，字段根据搜索的不同而变化。我如何实现它？链接到NgMask： angularGrid代码及其示例： var module = angular.module("example", ["angularGrid"]); module.controller("exampleCtrl", function($scope, $timeout) { var columnDefs = [ {di

我想在

angularGrid

表中使用

NgMask

来编辑字段，但我不知道如何编辑。
表中的信息来自PHP，字段根据搜索的不同而变化。
我如何实现它？
链接到NgMask：

angularGrid代码及其示例：

var module = angular.module("example", ["angularGrid"]);
module.controller("exampleCtrl", function($scope, $timeout) {

var columnDefs = [
    {displayName: "Default String", field: "defaultString", width: 150,     editable: true, volatile: true, cellRenderer: cellRenderer, newValueHandler:     numberNewValueHandler},
    {displayName: "Upper Case Only", field: "upperCaseOnly", width: 150, volatile: true, editable: true, cellRenderer: cellRenderer, newValueHandler: numberNewValueHandler},
    {displayName: "Number", field: 'number', width: 150, volatile: true, editable: true, cellRenderer: cellRenderer, newValueHandler: numberNewValueHandler},
    {displayName: "Custom With Angular", field: "setAngular", width: 175, editable: true, volatile: true, cellRenderer: cellRenderer, newValueHandler: numberNewValueHandler},
    {displayName: "Custom No Angular", field: "setNoAngular", width: 175, cellRenderer: cellRendererLink, cellTemplate: '<a href="#">{{row.entity[col.field]}}</a>'

我不想使用

ui网格

或其他什么，只想使用

angulargid

和一些掩码。

您可以动态创建

列df

，并在

editableCellTemplate

中指定所需掩码

代码的工作原理如下：

从服务器获取数据

从数据键创建字段

使用

mappingObj

扩展键

将

mappedData

设置为范围，以便

ngGrid

更新

您可能还可以向数据中添加验证属性，并使用该属性创建列定义

大写掩码工作不正常。我不知道怎么了。如果输入一些大写字符，然后快速输入小写字符，则可以输入

请看一下下面的演示或本演示

//main.js
var-app=angular.module（'myApp'，['ngGrid'，'ngMask']）；
app.controller（'MyCtrl'，函数（$scope，$http）{
/*$scope.myData=[{name:“Moroni”，年龄：50，个人ID:'123-234-445'}，
{姓名：“Tiancum”，年龄：43岁，个人ID:'223-234-445'}，
{姓名：“雅各布”，年龄：27岁，个人ID:'323-234-445'}，
{姓名：“尼菲”，年龄：29岁，个人ID:'423-234-445'}，
{姓名：“Enos”，年龄：34岁，个人ID:'523-234-445'}]；
*/
$scope.myData=[]；
$scope.colDef=[]；
/*
var columnDef=[{field:'name'，displayName:'First name'，width:90}，
{字段：'age'，宽度：50，cellClass:'ageCell'，headerClass:'ageHeader'，
editableCellTemplate:''}，
{字段：'personalId'，显示名称：'ID'，宽度：150，editableCellTemplate:'}]；
*/        
$http.jsonp（'http://www.mocky.io/v2/559304993c82b23c10eea6a6?callback=JSON_CALLBACK，然后（函数（响应）{
//'http://www.mocky.io/v2/5592fc513c82b22510eea699?callback=JSON_CALLBACK）。然后（函数（响应）{
//$scope.colDef=response.data；//[“ColumnName”：data.something]
var数据=响应数据，
键=[]，
curKeys=''，
地图数据，
mappingObject={
/*
姓名：{
displayName:“名字”，
宽度：90
},*/
年龄：{
宽度：50，
cellClass:'ageCell'，
headerClass:“ageHeader”，
editableCellTemplate:“”
},
个人身份证：{
displayName:“ID”，
宽度：150，
editableCellTemplate:“”
},
仅大写字母：{
displayName:“仅限超级大小写的属性”，
宽度：100，
editableCellTemplate:“”
}
};
$scope.myData=数据；
data.forEach（函数（行、索引）{
curKeys=Object.keys（行）；
控制台日志（curKeys）；
curKeys.forEach（函数（键）{
if（键索引of（键）=-1）
按键。按（键）；
});
});
mappedData=keys.map（函数（键）{
返回angular.extend（{field:key}，mappingObject[key]）；
});
console.log（mappedData）；
$scope.colDef=mappedData；
});
$scope.filter={filterText:''}；
$scope.gridOptions={
数据：“myData”，
启用筛选：正确，
过滤器选项：$scope.filter，
showFilter：是的，
enableCellEditOnFocus:true，//一次单击即可启用编辑器，如果使用enableCellEdit:true，则必须双击
columnDefs:'colDef'//columnDef
};
$scope.showRowCount=函数（）{
log（$scope.gridOptions.ngGrid.filteredRows.length）；
}
})；

/*style.css*/
.网格样式{
边框：1px实心rgb（212212212）；
宽度：400px；
高度：300px
}


海关抢劫犯
当前可见项：{{gridOptions.ngGrid.filteredRows.length}