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

我正在将我的jQuery应用程序迁移到AngularJS。AngularJS - 在事件刷新ngRepeat数组数据

我需要做的是在滚动发生时更改Data Array，我该怎么做？

我有这样的代码使用jQuery在普拉克： http://plnkr.co/edit/jdwxH5pmyecuWTsrutrO?p=preview

滚动时的股利，与可视元素的索引列表是表演。

我想要做的，就是设置一个指令，或在NG-重复元素的过滤器（ng-check-visibility），如：

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

而且这个指令改变item设定值item.visible=true当元素是可见的，否则将其设置为false。

我可以用Angular做这个吗？有任何想法吗？

来源

2013-05-14 Bruno Croys Felthes

这里有一个办法做到这一点作为一个指令：

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

来源

2013-05-14 20:00:19

太好了！非常好的主意！ –

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

回答

相关问题