Ng-table,隐藏列功能,无法手动从控制器隐藏列

Ng-table, hide-columns feature, can't hide columns from controller manually

我设置了带有复选框按钮的 ng-table 来隐藏列,效果很好。 这是一个 html

// switchers to hide/show columns
<div style="margin-bottom: 20px">
    <label class="checkbox-inline" ng-repeat="col in demo.cols">
      <input type="checkbox" ng-model-options="{ getterSetter: true }" ng-model="col.show"/> {{col.title()}}
    </label>
  </div>
// ng table self
  <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped" ng-table-columns-binding="demo.cols">
    <tr ng-repeat="row in $data">
      <td title="'Name'" ng-if="true">{{row.name}}</td>
      <td title="'Age'" ng-if="true">{{row.age}}</td>
      <td title="'Money'" ng-if="true">{{row.money}}</td>
    </tr>
  </table>

这里是控制器代码

    // NG-TABLE PARAMS
  self.cols = [
    { field: "name", title: "Name", show: true },
    { field: "age", title: "Age", show: true },
    { field: "money", title: "Money", show: true}
  ];

  var simpleList = [{"id":1,"name":"Nissim","age":41,"money":454},{"id":2,"name":"Mariko","age":10,"money":-100},{"id":3,"name":"Mark","age":39,"money":291},{"id":4,"name":"Allen","age":85,"money":871},{"id":5,"name":"Dustin","age":10,"money":378},{"id":6,"name":"Macon","age":9,"money":128},{"id":7,"name":"Ezra","age":78,"money":11},{"id":8,"name":"Fiona","age":87,"money":285},{"id":9,"name":"Ira","age":7,"money":816},{"id":10,"name":"Barbara","age":46,"money":44},{"id":11,"name":"Lydia","age":56,"money":494},{"id":12,"name":"Carlos","age":80,"money":193}];

  self.tableParams = new NgTableParams({}, {
    filterDelay: 0,
    dataset: simpleList,
    counts: []
  });

Image

问题

我想创建自己的按钮来一次隐藏必要的列,而不是单击每一列。为此,我创建了一个具有功能的按钮。 这里是按钮代码

<button  class="btn btn-default btn-sm" ng:click="demo.hideColumns()">Hide columns</button>

这里是controller里面的函数

self.hideColumns = function(){
    self.cols[1].show = false;
    self.cols[2].show = false;
}

上面的代码有效,复选框变为未选中状态,但 table 不隐藏列,我猜这个问题与 angular 的 getter/setter 功能有关,但是我解决不了。

尊敬的 SO 社区请帮我解决这个问题, 谢谢

链接

Codepen page, where I copied the code

col.showgetter/setter function。要切换值,请将 hideColumns 函数更改为即:

self.hideColumns = function(){
    self.cols[1].show(false);
    self.cols[2].show(false);
}

工作plunker