内容加载中特定 div 的位置

Question

我正在开发一个 Angularjs 前端和一个 Node.js 后端，我可以在其中接收所有数据。我得到一个 json 对象数组，代表几个这样的日期：

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

我想像这样显示数组，但实际视图中的第一天应该是 "today" 并且能够滚动 left/right 以显示 older/newer 天。

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

其实我是用ng-repeat从头开始显示数组的。我能够通过比较检测到 "today" 并向特定的 div 添加 class 但我不知道如何在 "today" div。你知道我该怎么做吗？

Answer 1

您可以使用 scrollIntoView().

这是一个示例。 scrollIntoView 应该在指令中。我把它放在控制器中只是为了展示它应该如何工作。

脚本

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>

代码段

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>

内容加载中特定 div 的位置

Position on specific div on content load

javascript

json

object

pageload

angularjs