Ограничить отображаемые записи вложенного ng-repeat - PullRequest
0 голосов
/ 25 сентября 2018

У меня есть такой объект:

data = {
  element1: ["content11", "content12"],
  element2: [],
  element3: ["content31"],
  element4: ["content41", "content42", "content43"]
}

Отображение всего с вложенным ng-repeat просто:

<div ng-repeat="element in data">
  <div ng-repeat="content in element">
    {{content}}
  </div>
</div>

Что дает мне ожидаемый результат:

content11
content12
content31
content41
content42
content43

Число элементов известно, но размер массивов различается.
Теперь я пытаюсь ограничить список отображаемых элементов 4.

Чтобы оживить ситуацию, я хочу сначала показать первые записи массива, затем продолжить со вторым и так далее.Что приводит к следующему коду:

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

Опять ожидаемый результат, но все еще борются с пределом:

content11
content31
content41
content12
content42
content43

Я пытался работать с $parent.$index и $index, но не смог создать работающую функцию подсчета.

К сожалению, мне приходится оценивать эту структуру данных в каждой строке большой таблицы и следить за производительностью.

Рефакторинг объекта по устаревшим причинам невозможен.

1 Ответ

0 голосов
/ 26 сентября 2018

Я придумал это:

<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 и не ожидается роста.

Если мне придется сделать это несколько раз в таблице, затраты все равно останутся линейными.

Надеюсь, проблем нетдля этого решения "на лету".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...