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

Question

I have set up ng-table with checkbox buttons to hide columns and it works great. here is an 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>

and here is controller code

    // 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

Problem

I wanted to create my own button to hide necessarry columns at once, instead of clicking to each column. To do that i created a button with function. Here the button code

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

and here is the function inside controller

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

the code above works, the checkboxes change to unchecked, but the table does not hide columns, I guess the problem somehow related to angular's getter/setter features, but I couldn't solve it.

Dear SO community please help me to solve this problem, Thank you

Links

Codepen page, where I copied the code

miensol · Accepted Answer · 2016-01-17 17:39:00Z

2

The col.show is a getter/setter function. To toggle the value change the hideColumns function to i.e.:

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

A working plunker

edited Jan 17, 2016 at 17:39

answered Jan 17, 2016 at 17:10

miensol

41.9k9 gold badges127 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Razor Over a year ago

thank you for response, it didn't work. Maximum call stack size exceeded error happened, and chrome crashed. Could you please provide working example on jsfiddle?

Razor Over a year ago

Sir, you da real MVP))) Thank you!

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related