限制显示的嵌套ng-repeat条目

时间:2018-09-25 12:25:03

标签: angularjs

我有一个这样的对象:

globalErrors

显示带有嵌套data = { element1: ["content11", "content12"], element2: [], element3: ["content31"], element4: ["content41", "content42", "content43"] } 的所有内容非常简单:

ng-repeat

这给了我预期的输出:

  

content11
  content12
  content31
  content41
  content42
  content43

元素的数量是已知的,但是数组的大小各不相同。
现在,我努力将显示的元素列表限制为4。

为了使事情变得有趣,我想先显示第一个数组项,然后继续显示第二个,依此类推。这将导致以下代码:

<div ng-repeat="element in data">
  <div ng-repeat="content in element">
    {{content}}
  </div>
</div>
iteration = [0,1,2,3] //because I want to limit everything to 4 elements and don't care for more

获得了预期的输出,但仍在极限范围内挣扎:

  

content11
  content31
  content41
  content12
  content42
  content43

我尝试使用<div ng-repeat="i in iteration"> <div ng-repeat="content in data"> {{content[i]}} </div> </div> $parent.$index,但未能成功建立有效的计数功能。

不幸的是,我必须在大型表的每一行中评估此数据结构,并且必须关注性能。

由于传统原因,无法重构对象。

1 个答案:

答案 0 :(得分:2)

我想到了这个

<div ng-repeat="i in iteration">
   <div ng-repeat="(type, content) in data" ng-show="content[i]  && countPreviousElements(data, i, $index) <= limit">
      {{content[i]}}
   </div>
</div>

  $scope.countPreviousElements = function(data, iteration, index){
    var sum = 0;
    var i = 0;
    for(var key in data){
      if(i<=index){
        sum += data[key].length > iteration+1 ? iteration+1 : data[key].length;
      }else{
        sum += data[key].length > iteration ? iteration : data[key].length;
      }
      i+=1;
    }
    return sum;
  };

http://plnkr.co/edit/0mzTBZIDuk39BFjJ2wRi?p=preview

这似乎按预期工作,并且可以在运行时更改“限制”。

让我们讨论一下表演。对data中的每个数组元素调用此函数。对生产数据进行分析后,data中数组内所有元素的总和不会超过每行20个,通常会小得多。

在函数内部,我们在data的长度上循环了一次,该长度现在固定为9,并且不会增长。

如果我必须在表中多次执行此操作,则成本仍然保持线性。

希望这种“即时”解决方案没有问题。