Javascript 使用ng hide切换具有ColResizeable的表中的列
我创建了一个简单的指令,它利用ColResizeable插件,在呈现后在表上激活插件:Javascript 使用ng hide切换具有ColResizeable的表中的列,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我创建了一个简单的指令,它利用ColResizeable插件,在呈现后在表上激活插件: app.directive("columnResizable", this.columnResizable = function($timeout) { return { restrict: "A", link: function(scope, element, attrs) { // Initialize colResizable plugin
app.directive("columnResizable", this.columnResizable = function($timeout) {
return {
restrict: "A",
link: function(scope, element, attrs) {
// Initialize colResizable plugin after DOM
$timeout(function() {
element.colResizable({
liveDrag:true,
postbackSafe: true,
partialRefresh: true,
minWidth: 100
});
});
}
}
});
在我需要添加一个特性来隐藏和显示表中的列之前,这个指令工作得很好。我使用ng隐藏并通过更改localStorage布尔变量来打开或关闭列。如果我从“全部显示”状态开始,列将按预期隐藏/显示。但拒绝显示我是否从隐藏状态开始:
<button class="btn btn-default"
ng-class="{active: emailHidden}"
ng-click="emailHidden = !emailHidden">Hide Email</button>
<table column-resizable class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th ng-hide="emailHidden">Email</th>
</tr>
</thead>
<tbody ng-if="!scheduleEntries || scheduleEntries.length == 0">
<tr>
<td>Foo Bar</td>
<td ng-hide="emailHidden">foo@bar.com</td>
</tr>
</tbody>
</table>
隐藏电子邮件
名称
电子邮件
富吧
foo@bar.com
我用常规布尔变量创建了一个plunker。如果将$scope.emailHidden变量更改为start hidden,则单击按钮时将不会显示电子邮件列:当
$scope.emailHidden
值设置为true时,ColResizer将第二列的宽度更新为零。即使emailHidden
标志设置为false,此宽度也不会更新。由于第二列在本例中没有任何宽度,我们无法在屏幕上看到它。我最终在指令中添加了emailHidden变量的观察程序,一旦更改,它将重置列宽并重新初始化ColResizeable插件:
scope.$watch('emailHidden', function(newVal) {
element.find('th').css('width','auto');
$timeout(function() {
element.colResizable({
liveDrag:true,
postbackSafe: true,
partialRefresh: true,
minWidth: 100
});
});
});
如果有人有更好的方法解决这个问题,我将不胜感激。最好是不涉及$watch的东西。。是的,我看得出来。。你对如何处理这个问题有什么建议吗?