AngularJS -在事件发生时刷新ngRepeat数组数据

AngularJS - Refresh ngRepeat Array Data at Event

本文关键字：刷新 ngRepeat 数组 数据 事件 AngularJS      更新时间：2023-09-26

我正在将我的jQuery应用程序迁移到AngularJS。

我需要做的是改变数据数组时，滚动发生，我怎么能做到这一点?

我有这个代码与jQuery在plunk:http://plnkr.co/edit/jdwxH5pmyecuWTsrutrO?p=preview

当您滚动div时，将显示一个具有可见元素索引的列表。

我想做的是在ng-repeat元素上设置一个指令或过滤器(ng-check-visibility)，如:

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

当元素可见时，此指令将item的值设置为item.visible=true，否则将其设置为false。

我可以在Angular中这样做吗?什么好主意吗?

这是一个指令:

  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

相关文章：