与Angular.js Footable一起 [英] Footable along with Angular.js

问题描述

我想要使用footable（<一个href=\"http://themergency.com/footable-demo/responsive-container.htm\">http://themergency.com/footable-demo/responsive-container.htm)随着angular.js。

I m trying to use footable(http://themergency.com/footable-demo/responsive-container.htm) along with angular.js.

随着窗口尺寸减小，第3列，4，5被点击加号时仅示出。

As the window size is reduced, Column 3, 4, 5 are only shown when plus sign is clicked.

Angular.js提供过滤功能，所以当我把一些搜索字符串类似如下：

Angular.js provides filtering capabilities, so when I put some search string like below:

表中的行进行过滤。

现在的问题是，当我尝试删除如下，搜索字符串：

Now the problem is when I try to remove this search string as below:

所有行再次显示，但用户界面是扭曲的。

all the rows are again show, but the UI is distorted.

我试着用得到的angular.js回调

I tried to get a callback in angular.js using

$scope.$watch('searchStringID', function() {
$('#tableId').trigger('footable_initialize');
}

但没有工作，如果任何人都可以提出如何解决这个问题。

but did not work, if anybody can suggested how to address this issue.

感谢。

推荐答案

要添加到丹尼尔斯塔基的回答，而不是每个 NG-重复执行时间添加每个单独的行，你可以等到NG-重复完成，然后在父表本身初始化FooTable：

To add to Daniel Stucki's answer, instead of adding each individual row each time ng-repeat executes, you can wait until ng-repeat is finished and then initialize FooTable on the parent table itself:

.directive('myDirective', function(){
  return function(scope, element){
    var footableTable = element.parents('table');

    if( !scope.$last ) {
      return false;
    }

    if (! footableTable.hasClass('footable-loaded')) {
      footableTable.footable();
    }
  };
})

这秤上表中有许多行好得多。

This scales much better on tables with many rows.

请注意元素自动成为 jQlite / jQuery对象，所以不再需要将其包装在 $（）语法。

Note element is automatically a jQlite/jQuery object, so there is no longer a need to wrap it in $() syntax.

更新

之一AngularJS的优点是数据双向绑定。为了保持FooTable数据同步的最新数据，你可以做这样的事情：

One of the advantages of AngularJS is the two-way data binding. To keep FooTable data in sync with the latest data, you can do something like this:

.directive('myDirective', function(){
  return function(scope, 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就绪，但显示之前，preventing数据闪烁。附加触发和重绘方法强制初始化FooTable实例来更新数据改变时。

The scope.$evalAsync wrapper executes once the DOM is ready but before it is displayed, preventing data flickering. The additional trigger and redraw method forces the initialized FooTable instance to update when the data changes.

该指令preserves用户体验 - 任何FooTable排序，筛选，或分页停留仍然存在 - 在加载数据的无缝每当更新

This directive preserves the user experience - any FooTable sorting, filtering, or pagination stays remains in place - while loading data seamlessly whenever it is updated.

这篇关于与Angular.js Footable一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！