Question

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

我需要做的是，当滚动发生时更改数据阵列，我该怎么做？

我在plunk上使用jQuery的代码： 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吗？有什么想法吗？

Answer 1

这是一种将其作为指令的方法：

  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

AngularJS - 在事件处刷新ngRepeat数组数据

1 个答案: