Обертка вокруг элемента списка ng-repeat после каждых 10 элементов - PullRequest
Новая
       6

Обертка вокруг элемента списка ng-repeat после каждых 10 элементов

0 голосов
/ 19 декабря 2018

У меня есть сценарий, в котором я должен создать новый ul, если внутренний элемент списка li достигает каждого 10-го варианта.Например, вот скрипка .У меня есть две переменные, и каждая переменная содержит ряд параметров.У меня есть внешний нг-повтор в строке div и внутренний повтор в элементе списка li.Из-за некоторых проблем с дизайном я должен создать новый ul, если внутренние параметры li достигают 10 значенийТо есть ul может обрабатывать только 10 элементов списка.Как я могу сделать это динамически, не влияя на существующий код переменной.Я пробую какую-то группу за материалом, но она ограничена для изменения существующего массива переменных.

Вот код

HTML 

<div ng-controller="MainCtrl">
  <div class="grid-list">
    <div class="grid-row" ng-repeat="variable in variables track by $index">
      <div class="grid_question"> {{variable.name}}
        <ul class="grid-list"> /// add new ul after every 10 option, ul can contain only 10 list.
          <li ng-repeat="option in variable.options track by $index">{{option.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

JSКод 

var app = angular.module('myApp', []);

function MainCtrl($scope) {
  $scope.variables = [{
      name: 'List 1',
      options: [{
        name: 'Option 1',
        value: '',
        has_comment: false
      }, {
        name: 'Option 2',
        value: '',
        has_comment: false
      }, {
        name: 'Option 3',
        value: '',
        has_comment: false
      }, {
        name: 'Option 4',
        value: '',
        has_comment: false
      }, {
        name: 'Option 5',
        value: '',
        has_comment: false
      }, {
        name: 'Option 6',
        value: '',
        has_comment: false
      }, {
        name: 'Option 7',
        value: '',
        has_comment: false
      }, {
        name: 'Option 8',
        value: '',
        has_comment: false
      }, {
        name: 'Option 9',
        value: '',
        has_comment: false
      }, {
        name: 'Option 10',
        value: '',
        has_comment: false
      }, {
        name: 'Option 11',
        value: '',
        has_comment: false
      }, {
        name: 'Option 12',
        value: '',
        has_comment: false
      }, {
        name: 'Option 13',
        value: '',
        has_comment: false
      }]
    },
    {
      name: 'List 2',
      options: [{
        name: 'Option 1',
        value: '',
        has_comment: false
      }, {
        name: 'Option 2',
        value: '',
        has_comment: false
      }, {
        name: 'Option 3',
        value: '',
        has_comment: false
      }, {
        name: 'Option 4',
        value: '',
        has_comment: false
      }, {
        name: 'Option 5',
        value: '',
        has_comment: false
      }, {
        name: 'Option 6',
        value: '',
        has_comment: false
      }, {
        name: 'Option 7',
        value: '',
        has_comment: false
      }, {
        name: 'Option 8',
        value: '',
        has_comment: false
      }, {
        name: 'Option 9',
        value: '',
        has_comment: false
      }, {
        name: 'Option 10',
        value: '',
        has_comment: false
      }, {
        name: 'Option 11',
        value: '',
        has_comment: false
      }, {
        name: 'Option 12',
        value: '',
        has_comment: false
      }, {
        name: 'Option 13',
        value: '',
        has_comment: false
      }]
    },
  ]
}
...