Scroll Inside the tbody angularjs

Question

I have created one table using angular js. Now I need to scroll the table rows to specific table row. I tried $anchorScroll but it doesn't worked for me.

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

What I want from the above code is, I need to scroll the table directly to 41st row.

Thank you.

It is better to use `div` with `col-xs-` instead of `table`. Why don't you use that? — Arun Ghosh, Sep 23 '16 at 06:27
what is the advantage of creating "div" than using "table" @ArunGhosh — siva nanda perumal, Sep 23 '16 at 06:37
http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — Arun Ghosh, Sep 23 '16 at 06:38

score 0 · Answer 1 · answered Sep 23 '16 at 06:43

I create a directive like this found on web.

Try using this code.

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);
                }
            });
        }
    };
});

I added preLoadOffset which load before scroll end.

Here's example template and controller

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

And this is controller snippet

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

Scroll Inside the tbody angularjs

1 Answers1