Question

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

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

我想像这样显示数组，但实际视图的第一天应该是“今天”，并且能够向左/向右滚动以显示较旧/较新的日期。

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

实际上我从一开始就使用ng-repeat显示数组。我能够通过比较检测“今天”并向特定div添加一个类但我不知道如何在“今天”div上对齐屏幕。你知道我怎么做吗？

Answer 1

您可以使用scrollIntoView()。

这是一个样本。 scrollIntoView应该在a指令中。我把它放在控制器中只是为了说明它应该如何工作。

<强>脚本

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的位置

1 个答案: