javascript - Material Design 数据表 (iamisti/mdDataTable) 中不显示默认列

Question

我正在尝试填充 <mdt-column> <mdt-header-row> 内部动态地使用来自 Controller 的数组。这段代码似乎不能正常工作:

hide-column-by-default="c.selector_hidden"

加载表时不显示默认列。某些列被设置为默认值并被排除在“列选择器”之外，因此即使在选择器中选择了所有列之后，这些列也不会显示。

当我设置 ...columnSelector: false}...在表格卡中它显示了我的列，但是选择列的功能不见了!？

我该如何解决这个问题？

这是 mdt-header-row:

<mdt-header-row>
<mdt-column 
hide-column-by-default="c.selector_hidden" 
exclude-from-column-selector="c.selector_exclude" 
column-sort="c.sort" 
sortable-rows-default="c.sort_default" 
column-key="{{c.key}}"  
align-rule="{{c.align}}" 
column-definition="{{c.definition}}" 
ng-repeat="c in tableHeader"><span>{{c.name}}</span></mdt-column>

</mdt-header-row>

数据来自 Controller 中的这个数组:

$scope.tableHeader = [
        {
            name: 'Dessert (100g serving)',
            definition: '',
            align: 'left',
            sort: true,
            sort_default:false,
            hidden: false,
            selector_exclude:false,
            selector_hidden:false
        },...

我还为它创建了一个分支: https://codepen.io/anon/pen/JJQyKN?editors=1111

Answer 1

This piece of code doesn't seem to work properly:

hide-column-by-default="c.selector_hidden"

那是因为您的 tableHeader 数组中的任何对象都没有 selector_hidden 属性。它应该看起来像这样:

$scope.tableHeader = [
        {
            name: 'Dessert (100g serving)',
            definition: '',
            align: 'left',
            sort: true,
            sort_default:false,
            hidden: false,
            selector_exclude:false,
            selector_hidden:true
        },...