Updating ngRepeat Array Data in AngularJS using Events

Question

Updating ngRepeat Array Data in AngularJS using Events

I'm currently in the process of transitioning my jQuery application to AngularJS.

One of the tasks I need to accomplish involves updating the Data Array whenever a scroll event occurs. How can I achieve this?

Here is the existing jQuery code at Plunker: http://plnkr.co/edit/jdwxH5pmyecuWTsrutrO?p=preview

When you scroll within the div, a list displaying the index of visible elements is shown.

What I aim to do is create a directive or filter (ng-check-visibility) for the ng-repeat element, like so:

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

This directive should modify the item by assigning the value item.visible=true when the element is visible, and false otherwise.

Can this be achieved with Angular? Any suggestions?

javascript angularjs angularjs-directive angularjs-ng-repeat angularjs-filter

Answer 1

Answer №1

Here is a directive approach to achieve this functionality:

  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>

Check out the plunkr example

Answer 2

Here is a directive approach to achieve this functionality:

  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>

Check out the plunkr example

Updating ngRepeat Array Data in AngularJS using Events

Answer №1

Similar questions

Unable to export JavaScript module

How to redirect in Next.js from uppercase to lowercase url

What is the process to transfer data from JavaScript to HTML within a Laravel environment?

Toggle the visibility of a div based on the id found in JSON data

Ensuring uniqueness of group by values in JavaScript when a textbox loses focus

Obtaining data via a URL and then displaying it in HTML with node.js and express.js

Ensuring a dependable detection of WebSocket connection status

Ways to modify the color of text in a hyperlink?

Using special symbols in HTML5 data attributes

Swap information in one array with information from a different array

Choosing various data using Ajax

Error occurs when using $window.history.pushState in the presence of $location

An AJAX request will only occur if there is an alert triggered on a particular computer

Guide to organizing an express.js project structure:

Tips for creating a dynamic curved SVG path

Despite the onsubmit returning false, the submit operation still goes through

What is the benefit of using an IIFE in this particular way when constructing a JavaScript library?

Exploring the crossroads of MongoDB, Mongoose, and Node.js: An in-depth look

Utilizing only select functions from lodash can be more beneficial than installing the entire library, as it reduces the amount of unnecessary dependencies

Can you explain the significance of the output "Object[...]" displayed in Firebug?