angularjs滚动NG重复反击 [英] angularjs scroll to counter in ng-repeat

问题描述

需要滚动到特定元素在列表中，如果 $指数== $ scope.counter NG-重复。

Need to scroll to specific element in a list if $index == $scope.counter of ng-repeat.

HTML

<button type="button" ng-click="findA()">FIND TYPE A</button>
<button type="button" ng-click="findB()">FIND TYPE B</button>    
<ul class="feeds">
  <li ng-repeat="m in mList" ng-class="showActive($index)">{{m.s}}</li>
</ul>

JS：
控制器：

JS: CONTROLLER:

$scope.shouldScroll = true; 

$scope.mList=[{"s":3},{"s":23},{"s":33},{"s":12},{"s":31},{"s":231}];
$scope.showActive =function(index){
        /* only if scope.counter == index ,, then set the class,, 
NEED : to scroll to this element where index == counter */
   if(index == $scope.counter){
       return 'activeMarkClass';
   }
   return '';
}

$scope.findA =function(){
   $scope.counter=2;
}
$scope.findB =function(){
   $scope.counter=5;
}

问题：

每当 findA 和 FINDB 被称为CSS类里的是在计数，使用 showActive 改变。但我也想滚动到这一要素计数。因此，当被称为 findA 我想以scrollTo的第二项并到第五项时FINDB被调用。尝试过的指令，但不明白为什么专柜将在这里使用。

PROBLEM :

Whenever the findA and findB is called the css class of li is changed on counter, using showActive. But I also want to scroll to this element counter. So when findA is called i want to scrollTo the the 2nd item and to the 5th item when findB is called. Tried directives but couldn't understand how counter will be used there.

的注：计数器的也使用由控制器等方法。所以不能在指令移动计数完全。另外的不要想做锚滚动，因为已经有路由网址那里，需要一个窗口滚动/ scrollTo 的

NOTE : the counter is also used by some other methods in the controller. So can't move counter completely in the directive. Also DON'T want to do anchor scroll since already having routing url there, need a window scroll/scrollTo

推荐答案

您已经编写该指令并观看计数更新。只要它更新，你的指令通过索引（计数器）和 scrollTo 找到的元素吧。

You've to write a directive for that and watch for counter to update. As soon as it updates, your directive finds the element by index (counter) and scrollTo it.

下面是一个演示： http://jsfiddle.net/ZdunA/1/

myApp.directive('scrollTo', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
         var $body = $('body');
         scope.$watch('counter', function(newVal, oldVal) {
             if (newVal && newVal !== oldVal) {
                 $body.scrollTop(element.find('li').eq(newVal).position().top)                     
             }                 
        });
    }
  };
});

这篇关于angularjs滚动NG重复反击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！