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>

因此，如果代码如下所示，则会有多个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中，以便您可以看到完整的工作示例。

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

1 个答案: