Угловой Перейти к определенному элементу в списке, созданном с помощью ng-repeat

Question

В моем приложении AngularJS у меня есть два списка, созданных с использованием ng-repeat.

Список один список всех пищевых категорий, таких как:

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

Список два списка все продукты, как:

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

номер списка элементов двух списков продуктов питания в группах, как, все элементы Мясо первым а затем все фрукты.

Я создал оба этих списка, используя div и ng-repeat, на одной странице.
Каждый элемент в обоих списках имеет уникальный идентификатор.

То, что я хочу добиться:

Когда пользователь выбирает один из пищевой категории из list one, то list two следует перейти к этой конкретной категории связанных продуктов питания.

Например, если пользователь выбирает Fruits в list one, тогда list two должен прокрутить до Oranges.

UPDATE

Также есть возможность выбрать элемент в списке один, когда пользователь прокручивает к определенной группе? Например, если пользователь прокручивает до Chicken в списке два, то в списке один должен быть выбран Meat.

Answer 1

А что-то вроде этого для элемента список1:

<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, используя "#" + {{itemType}} + $index в качестве селектора в элементе list1.

Answer 2

Я Personnally бы использовать в угловых $anchorScroll

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

Fiddle