пролет должен иметь 9 литов

Question

Я пытаюсь превратить страницу тимелина в угловой js. Ниже мой код

    </ul>
<ul class="list">
  <span class="columns">
    <li ng-repeat="item in list">{{item.name}}</li>
  </span>
</ul>

Каждый диапазон должен иметь 9 элементов. после этого должен быть открыт другой промежуток. Но сейчас все предметы находятся в одном пролете.

Answer 1

• Элемент <li> может быть только дочерним по отношению к <ul> или <ol>.
• . Единственные дочерние элементы <ul> могут иметь <li>

… так что вы не можете сгруппировать их с элементами span.

Если вы хотите организовать их в группы по 9 для целей рендеринга, тогда рассмотрите возможность использования сетки CSS (и настройкивверх ul в виде сетки с 9 столбцами).

ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
}

li:nth-child(odd) {
    background: #afa;
}

<ul><li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x<li>x</ul>

Answer 2

Элемент <span> не является допустимым содержимым для элементов <ul>.

Из документов:

Элемент HTML <ul> представляет неупорядоченный список элементов,обычно выводится в виде маркированного списка.

• Разрешенное содержимое: ноль или более <li> элементов, которые, в свою очередь, часто содержат вложенные элементы <ol> или <ul>.

Для получения дополнительной информации см.

• MDN HTML Ссылка: <ul> Элемент

Answer 3

В вашем контроллере вы можете создать новый массив из list:

let newList = [];
let tempList = [];
for (let i=0; i<list.length; i++) {
    tempList.push(list[i]);
    if (i%9 === 0) {
        newList.push(tempList);
        tempList = [];
    }
}

newList будет выглядеть так:

[
    [
        obj1,
        obj2,
        obj3,
        obj4,
        obj5,
        obj6,
        obj7,
        obj8,
        obj9,
    ],
    [
        obj10,
        obj11,
        obj12,
        obj13,
        obj14,
        obj15,
        obj16,
        obj17,
        obj18
    ],
    [
        obj19,
        obj20,
        obj21,
        obj22,
        obj23,
        obj24,
        obj25,
        obj26,
        obj27
    ],
    so on...
]

, а затем вы можете использоватьэтот вновь сформированный массив, соответствующий вашим целям

<span ng-repeat="item in list" class="columns">
    <li ng-repeat="item2 in item">{{item2.name}}</li>
</span>

Однако, как уже упоминали многие люди, вы должны использовать <ul> для группировки вашего элемента списка следующим образом:

<div class="columns">
     <ul ng-repeat="item in list" class="list">
          <li ng-repeat="item2 in item">{{item2.name}}</li>
     </ul>
</div>

Я не проверял код, но вы должны понять.