Angular 滚动到使用 ng-repeat 创建的列表中的特定项目答案

【问题标题】：Angular Scroll to specific item in the list created using ng-repeatAngular 滚动到使用 ng-repeat 创建的列表中的特定项目
【发布时间】：2016-06-16 05:51:53
【问题描述】：

在我的 AngularJS 应用程序中，我使用 ng-repeat 创建了两个列表。

列出所有食物类别，例如：

Meat, Fruits, Vegetables, Poultry, Dry Fruits ... etc.

列出两个所有食物，如：

Eggs, Chicken, Oranges, Apple, Banana ... etc.

第二个列表按组列出食物项目，例如，首先是所有肉类项目，然后是所有水果。

我在一个页面中使用div 和ng-repeat 创建了这两个列表。
两个列表中的每个元素都有唯一的 ID。

我想要达到的目标：

当用户从list one 中选择一种食物类别时，list two 应滚动到与该特定类别相关的食物项目。

例如，如果用户在list one 中选择Fruits，那么list two 应该滚动到Oranges 项目。

更新

当用户滚动到特定组时，是否可以选择列表一中的项目？例如，如果用户滚动到列表二中的Chicken，则应选择列表一中的Meat。

【问题讨论】：

标签： javascript angularjs list kendo-ui

【解决方案1】：

我个人会使用 Angular 的 $anchorScroll

    this.scrollTo = function(id) {
        $anchorScroll(id);
    }

Fiddle

【讨论】：

我使用的是角剑道，所以我不能根据剑道文档使用$anchorScroll。

【解决方案2】：

对于 list1 项来说这样的事情怎么样：

<div ng-repeat="itemType in itemTypes">
  <li ng-click="$scope.scrollThere({{"."+itemType}})">{{itemType}}</li>
</div>

对于 list2 有这样的东西：

<div id="list2" style="overflow-y: scroll; height: 30px;" ng-repeat="item2 in theItems">
  <li class="{{item2.itemType}}">{{item2.itemName}}</li>
</div>

然后以某种方式跟踪要滚动到哪个元素，这样在单击水果时会转到水果中的下一个项目？：

$scope.scrollThere = scrollThere;
$scope.count = { fruit: 0 };
function scrollThere(foodType){
    angular.element('#list2').animate({
      scrollTop: angular.element(foodType)[count[foodType]++].offset().top
    }, 1000);
}

并确保 y 溢出设置为在 css 中滚动。

或者，您可以使用"#" + {{itemType}} + $index 作为list1 项上的选择器，将索引逻辑嵌入到id 中，而不是对对象进行计数。

【讨论】：

感谢您的详细信息，我将尝试使用 ID，因为我已经拥有它。另请检查我的问题的更新部分。
当我使用此代码时，它会滚动但不会准确滚动到该元素，[count[foodType]++] 我也不清楚它的作用。我正在使用scrollTop: angular.element(foodType).offset().top，在滚动之后我也无法在它被阻止的列表中向上滚动。
@A_user 可能会添加一个事件侦听器以滚动到 list2 div 重置 scrollTop ... 另外，添加几个像素的偏移量使其对齐？如果假设我不止一次单击水果，我在想多次单击会转到基于迭代 [count[foodType]++] 的下一个项目？希望对您有所帮助。
如何在滚动时设置事件监听器，如果我重置scrollTop，那么我认为列表将再次滚动到第 0 个元素。