Question

在“按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>

Answer 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提取到一个单独的指令，并将人员相关的逻辑提取到其单独的服务，这将大大清理代码。

我可以详细说明是否需要。

希望这有帮助。

如果我们有很多div，那么哪个滚动会受影响，每个div都有一个在Controller范围内的滚动

1 个答案: