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: []
});
问题
我想创建自己的按钮来一次隐藏必要的列,而不是单击每一列。为此,我创建了一个具有功能的按钮。 这里是按钮代码
<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 社区请帮我解决这个问题,
谢谢
链接
col.show
是 getter/setter function。要切换值,请将 hideColumns
函数更改为即:
self.hideColumns = function(){
self.cols[1].show(false);
self.cols[2].show(false);
}
工作plunker
我设置了带有复选框按钮的 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: []
});
问题
我想创建自己的按钮来一次隐藏必要的列,而不是单击每一列。为此,我创建了一个具有功能的按钮。 这里是按钮代码
<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 社区请帮我解决这个问题, 谢谢
链接
col.show
是 getter/setter function。要切换值,请将 hideColumns
函数更改为即:
self.hideColumns = function(){
self.cols[1].show(false);
self.cols[2].show(false);
}
工作plunker