與Angular.js一起腳跟

Question

我試圖使用footable（​​）以及angular.js。

隨着窗口尺寸的減小，第3列，4，5點擊時加號僅示出。

Angular.js提供過濾功能，所以當我把一些搜索字符串象下面這樣：

表中的行進行過濾。

現在的問題是，當我嘗試如下刪除此搜索字符串：

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

我嘗試使用

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

獲得在angular.js回調，但沒有工作，如果任何人都可以提出如何解決這個問題。

謝謝。

Answer 1

我偶然發現了同樣的問題。在最終編寫一個自己的解決方案來獲得隱藏列表的表格後，我設法解決了您的問題（假設您使用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 2

爲了增加Daniel Stucki's answer，而不是每次都將每個單排ng-repeat執行，你可以等到NG-重複完成，然後對父表本身初始化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(); 
    } 
    }; 
}) 

這個尺度要好得多在有許多行的表上。

注意element自動爲jQlite/jQuery object，因此不再需要將其包裝在$()語法中。

更新

一個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.$evalAsync包裝執行一次的DOM是準備好，但它顯示，防止數據閃爍之前。額外的trigger和redraw方法會在數據更改時強制更新已初始化的FooTable實例。

該指令保留了用戶體驗 - 任何FooTable排序，過濾或分頁保持不變 - 當數據更新時無縫地加載數據。

Answer 3

爲防萬一以後有人偶然發現這個問題，這裏有一個可用於FooTable的角度指令：https://github.com/ziscloud/angular-footable。