Question

我设置了带有复选框按钮的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>

，这是控制器内部的功能

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

上面的代码工作，复选框更改为未选中，但表格不会隐藏列，我猜这个问题与角度getter/setter功能有某种关系，但我无法解决它

亲爱的SO社区请帮我解决这个问题，谢谢

链接

Codepen page, where I copied the code

Answer 1

col.show是getter/setter function。要切换值，请将hideColumns函数更改为例如：

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

工作plunker

Ng表，隐藏列功能，无法手动隐藏控制器中的列

1 个答案: