current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I'm migrating my jQuery app to AngularJS.

What I need to do, is change the Data Array when a scroll occurred, how can i do this?

I have this code with jQuery at plunk: http://plnkr.co/edit/jdwxH5pmyecuWTsrutrO?p=preview

When you scroll the div, a list with the visible elements index is show.

What I want to do, is to set a directive or a filter (ng-check-visibility) at the ng-repeat element, like:

<div ng-repeat="item in data" ng-check-visibility>
    {{item.name}}
</div>

And this directive change the item setting the value item.visible=true when the element is visible, otherwise, set it to false.

Can I do this with Angular? Any ideas?

share|improve this question

1 Answer 1

up vote 4 down vote accepted

Here's a way to do it as a directive:

  var app = angular.module('myapp', []);
  app.controller('MainCtrl', function($scope) {

    arr = [];
    for(var i=0; i<500; i++){
      arr.push({id: i, name: 'name'+i});          
    }
    $scope.data = {
      items: arr,
      visible: []
    };
  });

  app.directive('checkVisibility', function() {
    return {
      scope: {
        data: '=checkVisibility'
      },
      link: function(scope, el, attrs) {
        el.scroll( function() {
          var reference_top = el.offset().top;
          var reference_height = el.height();

          var $elements = el.find('.check');

          scope.data.visible = [];
          for(var i=0; i<$elements.length; i++){
            var $element = $($elements[i]);
            var element_top = $element.offset().top;
            var element_height = $element.height();

            if (reference_top < element_top + element_height &&
                reference_top + reference_height > element_top) {
                scope.data.visible.push( i );
            }
          }
          scope.$apply();
        });
      }
    };
  });

--

<body  ng-controller="MainCtrl">
  <div class="outer-panel" check-visibility="data">
    <div class="inner-panel">
      <div ng-repeat="item in data.items" class="check">
        {{item.name}}
      </div>
    </div>
  </div>
  <div id="visibles">
    {{data.visible}}
  </div>
</body>

plunkr

share|improve this answer
    
Great! Very good idea! –  Bruno Croys Felthes May 14 '13 at 20:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.