在tbody angularjs内滚动

Question

我已经使用angular js创建了一张表。 现在，我需要将表格行滚动到特定的表格行。 我尝试了$ anchorScroll，但它对我不起作用。

<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行。

谢谢。

Answer 1

我创建了一个在网上找到的指令。

尝试使用此代码。

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