Question

我要求输入密码＆＃39;输入＆＃39;作为我的可编辑单元格模板之一。

当单元格处于焦点时，我看不到文本，只是密码必须是模糊的。我面临的问题是，当它失去焦点时，会显示文本/字符串。

这是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;
    }
};

Answer 1

我与您的代码不同，因为它未完成，您可以从中获取指南（您可以在此处进行测试。）：

＆＃13;

function Ctrl($scope) {
          $scope.models = [
                {name:"Bob",age:25, city:"NewYork"},              
        ];
    }

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

因为您的单元格模板显示文本，所以当它失去焦点时，它会返回显示文本的单元格模板。

如果不正确，请更新plunker以显示密码，即使在单元格模板中也是如此。

您可以做的其他事情总是在单元格中显示星号。

此处将单元格模板设为

cellTemplate: '<span>******</span>'

然后为afterCellEdit添加回调

 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

UI网格 - 类型＆＃39;密码＆＃39;的可编辑单元格模板 - 失去焦点时显示文字

2 个答案: