Javascript 包装每10项后重复一次列表项

我有一个场景，在这个场景中，我必须创建一个新的ul，如果内部li列表项达到每10个选项。 举个例子，这里是。我有两个变量，每个变量包含许多选项。行div上有外部ng重复，列表项li上有内部重复。由于一些设计问题，我必须创建一个新的ul，如果内部锂选项达到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>

---

将选项数组切片为子数组并在

上添加

ng repeat

将是最简单的方法。您能否提供一个不更改现有数组的示例切片现有数组有什么问题？是否使用切片更改现有选项数组？这将是最简单的…是的

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
      }]
    },
  ]
}