AngularJS - 在事件中刷新 ngRepeat 数组数据答案

【问题标题】：AngularJS - Refresh ngRepeat Array Data at EventAngularJS - 在事件中刷新 ngRepeat 数组数据
【发布时间】：2013-05-14 18:36:40
【问题描述】：

我正在将我的 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 做到这一点吗？有什么想法吗？

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-repeat angularjs-filter

【解决方案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

【讨论】：