javascript - AngularJS - Refresh ngRepeat Array Data at Event -


i'm migrating jquery app angularjs.

what need do, change data array when scroll occurred, how can this?

i have code jquery @ plunk: http://plnkr.co/edit/jdwxh5pmyecuwtsrutro?p=preview

when scroll div, list visible elements index show.

what want do, set directive or filter (ng-check-visibility) @ ng-repeat element, like:

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

and directive change item setting value item.visible=true when element visible, otherwise, set false.

can angular? ideas?

here's way 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( );             }           }           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


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -