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.

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.

• javascript
• angularjs
• list
• kendo-ui

Share Follow edited Nov 20, 2017 at 7:43 gyc 4,36066 gold badges3636 silver badges5555 bronze badges asked Jun 16, 2016 at 5:51 User7723337User7723337 12k3030 gold badges114114 silver badges202202 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I personnally would use Angular's $anchorScroll

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

Fiddle

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.