迭代器中的 angularjs 锚（anchorscroll，ng-repeat，loop）

Question

例如，

<div ng-repeat="item in items">
   <p>item.title</p>
    ...
    ...
    ...
   <p>item.up</p>
</div>

据我所知，锚滚动需要为锚指定一个 id，但是我如何在没有 id 的情况下进行锚滚动，情况是有另一个循环包装这个项目重复。而且我不能指定像

这样的ID

<div ng-repeat="item in items">
   <p id="anchor{{$index}}">item.title</p>
    ...
    ...
    ...
   <p>item.up</p>
</div>

所以如果代码如下，就会有multi id="anchor{{$index}}"

 <div ng-repeat="parent in parents">
    <div ng-repeat="item in items">
       <p id="anchor{{$index}}">item.title</p>
      ........
    </div>
</div>

而且我不想用两个索引来指定id，不然代码会太复杂。

我该如何解决它.....谢谢

Answer 1

在不知道您的确切情况的情况下，我会说您将不得不在您关心的元素上人为地创建某种独特的anchorId。

同样，我不知道您的控制器或模型是什么样的，但您可以使用与此类似的技术。

angular.forEach(this.parents, function(parent, i){
    //Add unique anchorId to parent
    parent.anchorId = "anchor-" + i;
    angular.forEach(parent.children, function(child, j){

       //Add anchorId to child as well
       child.anchorId = "anchor-" + i + "-" + j;
    });
});

这基本上会给你一些你可以在 DOM 中绑定的东西，然后通过点击事件触发滚动。绑定将类似于您上面的绑定。

<div data-ng-repeat="parent in ctrl.parents">
   <h1 id="{{parent.anchorId}}">{{parent.name}}</h1>
   <div data-ng-repeat="child in parent.children">
      <h2 id="{{child.anchorId}}" class="child">
         {{child.name}}
         <small>
            <a href="" ng-click="ctrl.scrollTo(parent.anchorId)">
             | to {{parent.name}}
            </a>
         </small>
      </h2>
   </div>
</div>

最后，您可以在您的控制器中创建一个看起来像这样的scrollTo 方法。

Ctrl.prototype.scrollTo = function(anchorId){
  this.$location.hash(anchorId);
  this.$anchorScroll();
};

这基本上会做你想做的事，并让你滚动到你心中的内容。

我已将所有这些都包含在 jsFiddle example 中，以便您查看完整的工作示例。