Question

我有一个这样的对象：

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，但未能成功建立有效的计数功能。

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

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

Answer 1

我想到了这个

<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，并且不会增长。

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

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

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

1 个答案: