Question

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

列表一列出了所有食品类别，如：

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

列出两个列出所有食物，如：

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

第二个清单列出了组中的食物项目，首先是所有的肉类物品，然后是所有水果。

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

我想要实现的目标：

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

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

更新

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

Answer 1

我个人会使用Angular＆＃39; $anchorScroll

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

Fiddle

Answer 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中滚动。

或者不是使用对象保持计数，而是使用id作为list1项目上的选择器，将索引逻辑嵌入"#" + {{itemType}} + $index。

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

2 个答案: