2016-09-23 112 views
0

我已經創建了一個使用角度js的表格。現在我需要將表格行滾動到特定的表格行。我嘗試了$ anchorScroll,但它不適合我。滾動在tbody裏面angularjs

<div class="tab-pane fade in active" id="scorecard"> 
    <table class="header-fixed table"> 
     <tbody> 
      <tr ng-repeat="x in test" ng-class="x == 41 && 'current-user current-user-scroll' || x.show == 0 && 'tng-hide-user' || 'non-current-user'" ng-cloak dashboard-data"> 
      <td class="col-xs-2" >{{ x }}</td> 
      <td class="col-xs-8">{{ x }}</td> 
      <td class="col-xs-2">{{ x }}</td> 
      </tr> 
     </tbody> 
    </table> 
    </div> 

我想從上面的代碼是,我需要滾動表格直接到第41行。

謝謝。

+0

這是更好地使用'div'用'COL-XS-',而不是'table'。你爲什麼不使用它? –

+0

創建「div」比使用「table」的優勢是什麼@ArunGhosh – user15837

+0

http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html –

回答

0

我在網上創建了一個像這樣的指令。

請嘗試使用此代碼。

app.directive('scrolly', function() { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attrs) { 
       var raw = element[0]; 

      element.bind('scroll', function() { 

       if (raw.scrollTop + raw.offsetHeight > raw.scrollHeight - attrs.preLoadOffset) { 
        scope.$apply(attrs.scrolly); 
       } 
      }); 
     } 
    }; 
}); 

我添加了preLoadOffset,它在滾動結束之前加載。

這裏的示例模板和控制器

<div class="scroll" id="antTalkList" view-type="total" 
     scrolly="$ctrl.loadMore()" pre-load-offset="100"> 
    <ul class="user_list list ng-scope" > 
     <li class="clearfix express" ng-repeat="item in $ctrl.items"  ng-click="$ctrl.showAntTalk(item.articleId);"> 
    ... 

這是控制器片斷

... 
this.pageCount = 20; 
this.isScrollEnd = false; 
this.loadMore = function() { 
    if(!self.isScrollEnd){ 

     $http.get('ant/list/json?pageCount=' 
         +self.pageCount 
         +'&startIndex=' 
         + self.items.length 
         + '&sectionId=' 
         + $attrs.talkType 
       ).then(function mySucces(response) { 
      var apiRes = response.data; 

      if (apiRes.result_code == 'S0000') { 
       var list = apiRes.result.list; 
       if(list.length === 0) self.isScrollEnd = true; 
       for (i in list) { 
        self.items.push(list[i]); 
       } 
      } 
     }); 
    } 
} 

this.loadMore(); 
... 
相關問題