我试图使用footable(
http://themergency.com/footable-demo/responsive-container.htm)和angular.js.
当缩小窗口大小时,仅在单击加号时显示列3,4,5.
Angular.js提供了过滤功能,所以当我把一些搜索字符串如下所示：
表中的行被过滤.
所有的行都会再次显示,但是UI被扭曲.
我试图在angular.js中使用回调
$scope.$watch('searchStringID',function() {
$('#tableId').trigger('footable_initialize');
}
但是没有办法,如果有人可以建议如何解决这个问题.
谢谢.
要添加到
Daniel Stucki’s answer,而不是每次执行ng-repeat执行时添加每个行,您可以等到ng重复完成,然后在父表本身上初始化FooTable：
原文链接：https://www.f2er.com/angularjs/140490.html.directive('myDirective',function(){
return function(scope,element){
var footableTable = element.parents('table');
if( !scope.$last ) {
return false;
}
if (! footableTable.hasClass('footable-loaded')) {
footableTable.footable();
}
};
})
这对于具有多行的表格来说可以更好.
注意元素自动为jQlite/jQuery object,因此不再需要将其包装在$()语法中.
更新
AngularJS的优点之一是双向数据绑定.为了保持FooTable数据与最新数据同步,您可以执行以下操作：
.directive('myDirective',element){
var footableTable = element.parents('table');
if( !scope.$last ) {
return false;
}
scope.$evalAsync(function(){
if (! footableTable.hasClass('footable-loaded')) {
footableTable.footable();
}
footableTable.trigger('footable_initialized');
footableTable.trigger('footable_resize');
footableTable.data('footable').redraw();
});
};
})
范围.$evalAsync包装器在DOM准备好但在显示之前执行,从而防止数据闪烁.额外的触发器和重绘方法强制初始化的FooTable实例在数据更改时进行更新.
