0

在“通过ID滚动到一个元素”中，如果我们有多个div，将影响哪个滚动，每个div在Controller范围内都有一个滚动。在下面的示例中，如何将滚动设置为我刚刚添加的最新项目？任何帮助，谢谢！

这是我的脚本：

app.controller('MainCtrl', function($scope, $location, $anchorScroll) {
  var i = 1;
  $scope.people = [{"name": John,
                   "items": [{ id: 1, name: 'Item 1' }]},
                   {"name": Tom,
                   "items": [{ id: 1, name: 'Item 1' }]},
                  ]
  $scope.addItem = function (index){
    i++;
    $scope.people[index].items.push({ id: i, name: 'Item ' + i});
    $location.hash('item' + i);
    $anchorScroll();
  };

这是我的html：

<div ng-controller = "MainCtrl"  style="height:1000px; overflow:scroll">
  <div ng-repeat="person in people" style="height:700px; overflow:scroll">{{person.name}}
    <button ng-click="addItem($index)">Add Item </button>
    <div style="height:500px; overflow:scroll"> //How to set this scroll to the latest item?
      <ul>
      <li ng-repeat="item in person.items" id="item{{item.id}}">{{item.name}}</li>
      </ul>        
    </div>
  </div>
</div>
4

1 回答 1

1

经过一些简短的修复后，您提供的代码对我有用。对于初学者，您在 people 数组中的姓名应该用引号括起来，如下所示（第一个版本 - 有效，但仍然存在在版本 2 中修复的 HTML 错误）：

 $scope.people = [{"name": "John", //added quotes around John
               "items": [{ id: 1, name: 'Item 1' }]},
               {"name": "Tom", //added quotes around Tom
               "items": [{ id: 1, name: 'Item 1' }]},
              ]

另一个问题是您有非唯一的 id 属性，它们在您的 HTML 中应该是唯一的，如您所见：

您应该做的是更改初始化人员数组项的方式（第二版）：

  var i = 0;


  $scope.people = [{"name": "John",
                   "items": []},
                   {"name": "Tom",
                   "items": []},
                  ]
  $scope.addItem = function (index){
    i++;
    $scope.people[index].items.push({ id: i, name: 'Item ' + i});
    $location.hash('item' + i);
    $anchorScroll();
  };

  $scope.addItem(0); //add the item to John -> the id is 1
  $scope.addItem(1); //add the item to Tom -> the id is 2

我建议您将与单个人员相关的 html 提取到单独的指令中，并将人员相关逻辑提取到其单独的服务中，这将大大清理代码。

如果需要，我可以详细说明。

希望这可以帮助。

于 2013-11-05T07:19:26.060 回答