Question

我有一个团队列表，用户可以将团队添加到团队列表中。我遇到的问题是，当我将一个项目添加到列表时，角度重新呈现列表，滚动位置重置为顶部。

这是模板

 <div ng-controller="scores">
  <ul>
    <li ng-repeat="team in teams">
      {{team.name}}: 
      <button ng-click="decr(team)">-</button>
      {{team.score}}
      <button ng-click="incr(team)">+</button>
    </li>
  </ul>
    <a href="#" ng-click="add()">(+)Add Team</a>
  </div>

这是控制器代码

function scores($scope){
  $scope.teams = [
    {name:'red', score:100},
    {name:'blue', score:100},
    {name:'green', score:100}
  ];

  $scope.decr= function(team){team.score-=1;};
  $scope.incr= function(team){team.score+=1;};  
  $scope.add= function(){$scope.teams.push({name:"...", score:100});};    

}

你可以在这里看到工作示例。 http://jsbin.com/asedib/5

Answer 1

问题是您有href="#"，每次点击链接时都会将锚点/滚动位置重置到页面顶部。

我看到两个简单的解决方案：

最简单的方法是将锚点更改为按钮。这仍然清楚地表明这是一个可点击的元素，但没有锚元素：

<button ng-click="add()">(+) Add Team</button>

如果您更喜欢锚式外观，则可以删除href="#"，但随后更新CSS以将非锚定链接设置为外观，如链接一样。像这样：

<a ng-click="add()" class="clickable">(+) Add Team</a>

CSS：

a, a.clickable {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

这两种解决方案都可以在没有任何额外JavaScript的情况下解决当前问题。

在角度js中更新模型时保留滚动位置

1 个答案: