Does anybody know how to make an anchorScroll inside ng-repeat?

Question

I need to know how to make an anchorScroll to differents ID inside a ng-repeat menu.

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

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

Thanks!

Answer 1

Within ng-repeat, you can use index to assign different IDs to each element.

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

The index will increment with each item in pages. The part in id where I put link- is optional; you can put whatever prefix or suffix you want that way.

Answer 2

You should be able to do something like this. I don't know what your objects look like, but this should be helpful.

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>

Controller

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