ng-show 在可操作的列中不起作用

Posted 2023-03-22

【中文标题】ng-show 在可操作的列中不起作用

【英文标题】：ng-show doesn't work in handsontable column

【发布时间】：2019-09-23 10:10:05

【问题描述】：

我将 Handsontable 0.34.5 与 AngularJS 1.6.5 和 ngHandsontable 0.13 包装器一起使用。

我需要根据条件隐藏handsontable表列。

我尝试使用 ng-show 或 ng-hide 指令来执行此操作，但它不起作用。

Handsontable HiddenColumns 插件似乎在 0.34.5 版本中不受支持。

代码如下：

<hot-table settings="tableSettings" datarows="items">
    <hot-column ng-show="false" data="id" title="'ID'"></hot-column>   
</hot-table>

这里是demo。

如何使用 angular 指令隐藏 Handsontable？

更新：

目前我正在使用 ng-if 指令。但它有一个我不满意的问题：当条件为真并且列被添加到表的末尾时，它会重新创建 DOM，但不是在规定的位置。看看here

【问题讨论】：

我认为角标签应该在（ng-show）括号中。

【参考方案1】：

要操作列，请避免使用<hot-column> 指令。而是使用columns 属性：

<hot-table col-headers="true" 
           datarows="ctrl.data" 
           columns="ctrl.columns">
</hot-table>

this.columns = [
     data: 'id',    title: 'ID',    readOnly: true  ,
     data: 'name',  title: 'Name',  readOnly: true  ,
     data: 'price', title: 'Price', readOnly: false 
];


var deletedName;  
this.hideName = function() 
    deletedName = this.column.splice(1,1);
;
this.showName = function() 
    this.column.splice(1,0,deletedName);
;

【参考方案2】：

你可以使用 ng-if 指令来隐藏你的列

<hot-table settings="tableSettings" datarows="items">
    <hot-column ng-if="false" data="id" title="'ID'"></hot-column>   
</hot-table>

Demo

【讨论】：

谢谢。我现在正在使用这种方法，但它有一个缺点。当条件为真并且列被添加到表的末尾时，它会重新创建 DOM，但不是在规定的位置。看看here