内容加载在特定div上的位置

Question

I'm developing a Angularjs frontend with a Node.js backend where I can received all the data. I get an array of json objects who represents several dates like this:

[
 ...
 {date: "30/11"}, /* today */
 {date: "1/12"},
 {date: "2/12"},
 {date: "3/12"},
 ...
]

I would like to display the array like this but the first day on the actual view should be "today" and be able to scroll left/right to display older/newer days.

+----------------------------+
| today   1/12   2/12   3/12 |
|+-----+ +----+ +----+ +----+|
||     | |    | |    | |    ||
||     | |    | |    | |    ||
|+-----+ +----+ +----+ +----+|
|                            |
|         Scrollbar          |
| <________________________> |
+----------------------------+

Actually I display the array from the start with ng-repeat. I'm able to detect "today" with a comparison and add a class to the specific div BUT I don't know how to align the screen on the "today" div. Do you have any idea about how I can do this ?

Answer 1

You can use scrollIntoView() .

Here's a sample. The scrollIntoView should be in the a directive. I've put it in the controller just to show how it's supposed to work.

Script

angular.module("app", []).controller("LineCtrl", function ($scope) {
    var tds = []
    for (var i = 0; i < 250; i++)
        tds.push(i);

    $scope.tds = tds;

    setTimeout(function () {
        document.getElementsByClassName('today')[0].scrollIntoView();
    }, 1000)
});

HTML

<div ng-app="app">
    <div ng-controller="LineCtrl">
        <table>
            <tr>
                <td ng-repeat="td in tds" ng-class="{ 'today': $index === 50 }">{{ td }}</td>
            </tr>
        </table>
    </div>
</div>

---

Code Snippet

 angular.module("app", []).controller("LineCtrl", function($scope) { var tds = [] for (var i = 0; i < 250; i++) tds.push(i); $scope.tds = tds; setTimeout(function() { document.getElementsByClassName('today')[0].scrollIntoView(); }, 1000) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="LineCtrl"> <table> <tr> <td ng-repeat="td in tds" ng-class="{ 'today': $index === 50 }">{{ td }}</td> </tr> </table> </div> </div>