Как использовать тег «hr» после каждой строки между ng-repeat при отображении нескольких флажков с использованием угловых js

Question

Как использовать тег «hr» после каждой строки между ng-repeat при отображении нескольких флажков с использованием угловых js

0

я хочу добавить

строка после каждой строки. Но я не могу сделать, поскольку я использую ng-repeat для отображения списка флажков. Может кто-нибудь помочь мне в моем коде. ниже мой code-

 <div>Check All
            <input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
        </div>
       <div ng-repeat="item in Items">

  <div class="col-md-4">
            <label>
                <input type="checkbox" ng-model="item.Selected" />{{item.Name}}
            </label>
            </div>

        </div>

Я хочу добавить строку "hr" после проверки всех, затем после пункта 3 и последнего элемента Item6. может ли кто-нибудь сказать мне, должен ли я поместить этот hr-тэг, чтобы я получил строку после каждой строки? Вот мой плукер.

Aanchal 26 июль 2016, в 13:46

Источник

Теги:

angularjs

angularjs-ng-repeat

4 ответа

1

как этот?

<div>
     Check All
     <input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
     <hr />
</div>
<div ng-repeat="item in Items">
     <div class="col-xs-4 col-md-4">
         <label>
             <input type="checkbox" ng-model="item.Selected" />{{item.Name}}
         </label>
         <hr />
     </div>
</div>

Mehmet SÖĞÜNMEZ 26 июль 2016, в 10:20

0

Но это не показывает всю линию между рядами. см. здесь - plnkr.co/edit/zPTMz3Z1qfqpXLoTDwun?p=preview
Aanchal 26 июль 2016, в 12:17
0

Ох, жаль об этом. это мой дерьмовый монитор: / Кажется, код @ CSVN делает то, что вы просите.
Mehmet SÖĞÜNMEZ 26 июль 2016, в 12:23

0

 <div ng-repeat="item in Items"><div class="col-xs-4 col-md-4">
        <label>
            <input type="checkbox" ng-model="item.Selected" />{{item.Name}}
        </label>
        </div>
        <br>
         <hr>
    </div>

Vikash Kumar 26 июль 2016, в 09:58

0

Вы можете повторять несколько DOM-номеров, используя ng-repeat-start и ng-repeat-end.

<div>Check All
    <input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
</div>
<div class="col-md-4" ng-repeat-start="item in Items">
    <label>
        <input type="checkbox" ng-model="item.Selected" />
        {{item.Name}}
    </label>
</div>
<hr ng-repeat-end>

Pjetr 26 июль 2016, в 09:41

Ещё вопросы

Но это не показывает всю линию между рядами. см. здесь - plnkr.co/edit/zPTMz3Z1qfqpXLoTDwun?p=preview
Ох, жаль об этом. это мой дерьмовый монитор: / Кажется, код @ CSVN делает то, что вы просите.

Csvn · Accepted Answer · 2016-07-26T09-39-00.000Z

Я считаю, что вы можете добиться этого, используя синтаксис ng-repeat-start/ng-repeat-end в сочетании с ng-if и repeat $ index для показа только после каждого третьего элемента.

<hr>
<div class="row" ng-repeat-start="item in Items">
  ..
</div>
<hr ng-repeat-end ng-if="$index % 3 === 2">

См. Обновленный плункер

редактировать

То, что вы концептуально хотите, чтобы ваш HTML выглядел следующим образом:

<div class="row">
  <div class="col-4"></div>
  <div class="col-4"></div>
  <div class="col-4"></div>
</div>
<hr />
<div class="row">
  <div class="col-4"></div>
  <div class="col-4"></div>
  <div class="col-4"></div>
</div>
<hr />
...

Один из вариантов - использовать внешний и внутренний ng-repeat. Сначала преобразуйте список элементов из [a, b, c, d, e, f, g, h] в [[a, b, c], [d, e, f], [g, h]]. Затем мы можем повторить по каждой "группе" сначала для строк, а затем повторить по отдельным элементам для столбцов.

<div class="row" ng-repeat-start="group in Items | groupArray:3">
  <div class="col-4" ng-repeat="item in group"></div>
<hr ng-repeat-end />

Здесь плункер показывает, как это можно сделать.

Примечание. Эта опция имеет значительно больший удар по производительности из-за наличия нескольких ng-повторов.

Если вы не используете классы bootstraps row/col-*, можно создать настраиваемый компонент для отображения содержимого в столбцах. Это требует больше работы, но может быть намного более результативным. Я не буду приводить здесь пример кода, но он может работать как-то так:

<my-column-component items="myItems" columns="3">
  <label>
    <input type="checkbox" ng-model="$item.selected"> {{ $item.name }}
  </label>
</my-column-component>

Три элемента должны располагаться в трех столбцах подряд, в вашем коде три элемента располагаются в отдельных строках, я хочу, чтобы они были в одной строке. @ Csvn
@Aanchal В столбцах способ, который вы объяснили, немного сложнее, но я добавил дополнительную информацию в моём редактировании выше.