AngularJs: How do I scroll table to the current ng-init date?

Question

I have this snippet of code on my DOM that initializes the current date on my table.

<table id="daysTableLeft" class="table table-hover" ng-init="getHorraire(pickDateRow,$index,0)">
                          <tr ng-repeat="fd in getFullDayDate track by $index"
                          ng-click="getHorraire(fd.myDate,$index,1)"
                          style="cursor:pointer" ng-model="pickDateRow"
                          ng-class="{activeLink: $index===selectedIndex, weekend: fd.dayName=='Samedi'|| fd.dayName=='Dimanche'}">
                          <td style="font-size:14px;" id="{{fd.$index}}"> {{fd.fullDate}}, 2018</td>
                          </tr>
                          <tr><td style="height:80px;"></td></tr>
                      </table>

For instance, if today's date is 30/03/2018, I know that the 30th date is located at the bottom element. I then have to manually scroll to see today's date.

Is there a possibility to automatically scroll to the current date?

could you use anchor scroll? https://plnkr.co/edit/HU0jjIzPjRaJL1HkCYMx?p=preview — Bryan Dellinger, Mar 23 '18 at 18:58

score 2 · Accepted Answer · answered Mar 23 '18 at 19:43

As suggested by @Bryan you can create an id for the current date and use anchor-scroll to scroll to the current date.

 <div ng-repeat="item in dateArray">
    <span id="{{(item.getDate()==today.getDate())?'scrollDate':''}}">
        {{item | date}}
    </span>
 </div>

You have to inject$location and $anchorScroll into your controller.

Working jsfiddle link for your reference.

NOTE: $anchorScroll does not provide smooth scroll or does not work with ngAnimate. If you want to have smooth scroll you have to use third party directive.

Reference link: https://stackoverflow.com/a/21918502/2079271

AngularJs: How do I scroll table to the current ng-init date?

1 Answers1