Angular Scroll to specific item in the list created using ng-repeat

Question

In my AngularJS app I have two lists created using ng-repeat.

List one lists all the food categories like:

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

List two lists all the foods like:

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

List number two lists food items in groups like, all the Meat items first and then all Fruits.

I have created both of these lists using div and ng-repeat, in one page.
Each element in the both of the lists has unique ID.

What I want to achieve:

When user select one of the food category from list one, then list two should scroll to that particular category related food items.

For example if user selects Fruits in list one then, list two should scroll to Oranges item.

UPDATE

Also is it possible to select item in list one when user scrolls to specific group? For example if user scrolls to Chicken in list two then in list one Meat should be selected.

gyc · Accepted Answer · 2016-06-16 06:52:41Z

3

I personnally would use Angular's $anchorScroll

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

Fiddle

answered Jun 16, 2016 at 6:52

gyc

4,3586 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

User7723337 Over a year ago

I am using angular kendo so I can not use $anchorScroll as per the kendo documentation.

jmunsch · Accepted Answer · 2016-06-16 06:46:04Z

2

What about something like this for a list1 item:

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

With something like this for list2:

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

And then keep track of which element to scroll to somehow like this just goes to the next item in the fruits when fruit is clicked?:

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

And making sure the y overflow is set to scroll in the css.

Or instead of keeping count with an object you could embed the index logic into an id using "#" + {{itemType}} + $index as the selector on the list1 item.

edited Jun 16, 2016 at 6:46

answered Jun 16, 2016 at 6:22

jmunsch

24.3k12 gold badges102 silver badges120 bronze badges

4 Comments

User7723337 Over a year ago

Thanks for the details I will try it with ID as I have it already. Also please check updated part of my question.

User7723337 Over a year ago

When I use this code then it scrolls but not to that element exactly, also [count[foodType]++] I am not clear what it does. I am using scrollTop: angular.element(foodType).offset().top also after doing scroll I am not able to scroll upwards in the list it is blocked.

jmunsch Over a year ago

@A_user perhaps add an event listener for scroll to the list2 div reseting the scrollTop ... Also, add an offset by a few pixels so it lines up? I was thinking clicking multiple times would go to the next item based on iterating [count[foodType]++] if lets say i clicked on fruit more than once? Hope it helps.

User7723337 Over a year ago

How to set event listener on scroll and if I reset scrollTop then I think list will scroll to 0th element again.

Collectives™ on Stack Overflow

Angular Scroll to specific item in the list created using ng-repeat

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related