angularjs - 可与 Angular.js 一起使用

Question

我正在尝试将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');
}

但没有奏效，如果有人可以建议如何解决这个问题。

谢谢。

Answer 1

要添加到Daniel Stucki 的答案ng-repeat中，您可以等到 ng-repeat 完成后再在父表本身上初始化 FooTable ，而不是每次执行时都添加每一行：

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

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

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

这在具有多行的表上可以更好地扩展。

Noteelement自动成为jQlite/jQuery 对象，因此不再需要用$()语法包装它。

更新

AngularJS 的优点之一是双向数据绑定。要使 FooTable 数据与最新数据保持同步，您可以执行以下操作：

.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();

    });
  };
})

包装器在scope.$evalAsyncDOM 准备好但在显示之前执行，防止数据闪烁。附加的triggerandredraw方法强制初始化的 FooTable 实例在数据更改时更新。

该指令保留了用户体验——任何 FooTable 排序、过滤或分页保持不变——同时在数据更新时无缝加载数据。

Answer 2

我偶然发现了同样的问题。在最终编写了一个自己的解决方案来获得一个带有隐藏列的表之后，我设法解决了你的问题（假设你使用 ng-repeat 来构建你的表）。

html:

<div ng-init="friends =     [{name:'data11', phone:'data12'},
                         {name:'data21', phone:'data22'},
                         {name:'data31', phone:'data32'},
                         {name:'data41', phone:'data42'},
                         {name:'data51', phone:'data52'}]"></div>

Search: <input ng-model="searchText">
<table id="searchTextResults" class="footable">
<thead>
  <tr><th>Column1</th><th>Column2</th><th data-hide="phone">Column3</th><th data-hide='phone'>Column4</th><th data-hide='phone'>Column5</th></tr>
</thead>

<tbody>
  <tr ng-repeat="friend in friends | filter:searchText" my-directive>
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</tbody>
</table>

控制器：

.directive('myDirective', function(){
  return function(scope, element)
  {

    if(scope.$last && !$('.footable').hasClass('footable-loaded')) {
            $('.footable').footable();
    }

    var footableObject = $('.footable').data('footable');
    if (footableObject  !== undefined) {
            footableObject.appendRow($(element));
    }

  };})

希望这可以帮助。

Answer 3

以防万一将来有人偶然发现，这里有一个可用于 FooTable 的 angular 指令：https ://github.com/ziscloud/angular-footable 。