我有一个要求有一个密码类型'input'作为我的可编辑单元格模板之一。
当单元格处于焦点中时，我看不到文本，它就像密码一样被模糊了。我面临的问题是，当它失去焦点时，文本/字符串就会显示出来。
这是plnkr - http://plnkr.co/edit/m0T1JfhLvDHOGaX9LF51?p=preview。非常感谢任何帮助。
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableCellEditOnFocus: true,
columnDefs: [
{ field: 'name',
editableCellTemplate: '<input type = "password" ng-class="'colt' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"/>'
}
],
onRegisterApi: function( gridApi ) {
grid = gridApi.grid;
}
};
我没有从你的代码一样，因为它是未完成的，你可以从它的指导方针(你可以在这里测试它):
function Ctrl($scope) {
$scope.models = [
{name:"Bob",age:25, city:"NewYork"},
];
} td > span, th>span {
display:block;
padding:20px;
}
th > span {
background-color:#eee;
}
table td, table th {
border:1px solid grey;
}
table {
width:100%;
}
#main {
padding:20px;
}<html ng-app>
<head>
<script src="http://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.min.js" type="text/javascript"></script>
</head>
<body>
<div id="main" ng-controller="Ctrl">
<table cellpadding="20">
<tr>
<th ng-repeat="(head, value) in models[0]"><span>{{head}}</span></th>
</tr>
<tr ng-repeat="row in models">
<td ng-repeat="(name, value) in row" ng-scope>
<span ng-click="editing = true" ng-hide="editing" ng-bind="row[name]"></span>
<input ng-model="row[name]" ng-show="editing" />
<button ng-click="editing = false" ng-show="editing">ok</button>
</td>
</tr>
</table>
</div>
</body>
</html>因为你的cell Template显示文本，所以当它失去焦点时，它会回到cell Template显示文本。
如果不正确，请更新柱塞，即使在单元格模板中也显示密码。
你可以做的另一件事是总是在单元格中显示星号。
Here Put cell template as
cellTemplate: '<span>******</span>'
然后为aftercellledit添加回调
gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef,newValue,oldValue){
if(newValue != oldValue){
// Do something.......
// colDef.field has the name of the column that you are editing
}
});
这是你的更新的Plunker: Plunker