angularjs - ng-repeat 内で anchorScroll を作成する方法を知っている人はいますか?

Question

ng-repeat メニュー内のさまざまな ID に anchorScroll を作成する方法を知る必要があります。

<li data-ng-repeat="page in pages">
   <a href="{{href}}">{{ page.title }}</a>
</li>

<div id="1">One</div>
<div id="2">Two</div>

ありがとう！

Answer 1

このようなことができるはずです。オブジェクトがどのように見えるかはわかりませんが、これは役立つはずです。

HTML

<li data-ng-repeat="page in pages">
   <a href="" ng-click="scrollTo(page.index)">{{ page.title }}</a>
</li>

<div id="1">One</div>
<div id="2">Two</div>

コントローラ

$scope.pages = [
  { title: "test1", index: 1},
  { title: "test2", index: 2}
];
$scope.scrollTo = function(id) {
  document.getElementById(id).scrollIntoView();
};

Answer 2

indexng-repeat 内で、各要素に異なる ID を割り当てる ために使用できます。

<li data-ng-repeat="page in pages">
    <a id="link-{{page.index}}" href="{{href}}">{{ page.title }}</a>
</li>

インデックスは の各アイテムで増加しますpages。私が入れた id の部分link-はオプションです。このように、任意の接頭辞または接尾辞を付けることができます。