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

Question

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

列表一列出了所有食物类别，例如:

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

List two lists all the foods like:

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

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

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

我想要实现的目标:

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

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

更新

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

Answer 1

我个人会使用 Angular 的 $anchorScroll

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

Fiddle