UI grid cellTemplate editableCellTemplate 不会失去焦点

Question

我正在使用 angular-ui-grid 并试图显示几个单元格模板的组合。我需要一些网格单元来根据实体的属性更改 class/color。我需要其他单元格来显示一个按钮，该按钮可以切换 on/off，并且仅在行实体为 'ATTRIBUTE' 时才会出现在某些行和单元格中。我想出了一个 cellTemplate 和一个 editableCellTemplate 的组合来完成这个。一切似乎都正常，除了当我单击带有输入字段的单元格焦点外时，它不会失去焦点，并且我收到错误语法错误：令牌 'undefined' 不是列 null 的主要表达式从[row.entity[]开始的表达式[row.entity[]。当我编辑单元格时，它变成输入模式，我可以输入数据，当我点击退出时，它不会失去焦点它停留在编辑模式。如果我在网格上移动滚动条，它将失去焦点

这是我的单元格模板：

<div ng-if="row.entity.resultType === 'ATTRIBUTE'  &&  row.entity[col.colDef.field] == 'Pass'" ng-class="grid.appScope.getClassFromTemplate(row, col)">
<button class="ui-grid-cell-btn" type="button"  ng-click="grid.appScope.togglePass(row, col)" >
    <span class="glyphicon glyphicon-ok green"></span>
</button>
</div>
<div ng-if="row.entity.resultType === 'ATTRIBUTE' && row.entity[col.colDef.field] != 'Pass'" ng-class="grid.appScope.getClassFromTemplate(row, col)">
<button class="ui-grid-cell-btn" type="button" ng-click="grid.appScope.togglePass(row, col)" >
    <span class="glyphicon glyphicon-remove red"></span>
</button>
</div>

//what should this template look like?... should be just standard template to display ui grid data
<div ng-if="row !== null && row.entity.resultType !== 'ATTRIBUTE'" class='ui-grid-cell-contents'>
    {{MODEL_COL_FIELD}}
</div>

和我的可编辑单元格模板

<div ng-if="row.entity.resultType === 'ATTRIBUTE'  && row.entity[col.colDef.field] == 'Pass'" class='ui-grid-cell-contents'>
<button class="ui-grid-cell-btn" type="button"  ng-click="grid.appScope.togglePass(row, col)" >
    <span class="glyphicon glyphicon-ok green"></span>
</button>
</div>
<div ng-if="row.entity.resultType === 'ATTRIBUTE' && row.entity[col.colDef.field] != 'Pass'" class='ui-grid-cell-contents'>
<button class="ui-grid-cell-btn" type="button"  ng-click="grid.appScope.togglePass(row, col)" >
    <span class="glyphicon glyphicon-remove red"></span>
</button>
</div>
<div ng-if="row.entity !== null && row.entity.resultType !== 'ATTRIBUTE'" >
<form name="inputForm">
    <input style="background-color: white; !important; color: black !important" type='text' ng-class="'colt' + col.uid" ui-grid-editor ng-model='MODEL_COL_FIELD'>
</form>
</div>

我对所有内容都进行了空检查，但仍然出现错误，所以很困惑。请帮忙！

Answer 1

您的问题可能是以下任一问题：

'==='运算符
将“===”替换为“==”。 Angular 需要带有“==”运算符的语句。

Why is AngularJS complaining about an unexpected token in an expression when I try to use a string?
尝试使用 ng-show 或 ng-hide 而不是 ng-if
我之前使用 ng-if 遇到过运行问题，因为 ng-if 创建了一个子范围，这可能是导致该错误的原因。

更多详细信息在此 blog

UI grid cellTemplate editableCellTemplate 不会失去焦点

UI grid cellTemplate editableCellTemplate doesn't lose focus

angularjs

angular-ui-grid