ng-повторять, не повторяя определенный элемент

#javascript #html #angularjs #angular-template

#javascript #HTML #angularjs #angular-шаблон

Вопрос:

Я использую Angularjs для повторения некоторых элементов в моем HTML. Angular правильно повторяет divs, но при попытке повторить определенный div это просто не работает. Объяснение после кода:

 <tr ng-repeat="x in controlList" class="tr-shadow">
   <td>{{x.fecha_control}} </td>
   <td>{{x.hora}}</td>
   <td class="desc">{{x.valor}}</td>
   <td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
   <td>
      <span class="status">{{x.momento}} </span>
   </td>
   <td>
      <div class="table-data-feature">
         <button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
         <i class="zmdi zmdi-edit"></i>
         </button>
         <button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
         <i class="zmdi zmdi-delete"></i>
         </button>
      </div>
   </td>
<tr class="spacer"></tr>
</tr>

Angular повторяет все внутри <tr ng-repeat="x in controlList" class="tr-shadow"> </tr> , КРОМЕ последнего div <tr class="spacer"></tr>

Если я прокомментирую разделитель, ng-repeat действительно повторяет разделитель, но если я этого не сделаю, разделитель отображается только один раз в конце повторяющегося кода.

 <!--  <tr class="spacer"></tr> -->

Я попытался изменить HTML-тег для spacer, но у меня та же проблема.
Как вы можете видеть в отладчике Chrome, разделитель отображается после повторяющегося кода:

1. ваш HTML-код недопустим, вы не можете иметь tr тег внутри tr тега

2. Вы, должно быть, имели в виду <td>

3. @MadhawaPriyashantha тогда почему у меня такая же проблема при изменении HTML-тега?

Ответ №1:

Если вы действительно хотите включить свой разделитель в свою итерацию, есть другой вариант, который называется ng-repeat-start и ng-repeat-end

Должно сработать что-то вроде следующего

 <tr ng-repeat-start="x in controlList" class="tr-shadow">
   <td>{{x.fecha_control}} </td>
   <td>{{x.hora}}</td>
   <td class="desc">{{x.valor}}</td>
   <td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
   <td>
      <span class="status">{{x.momento}} </span>
   </td>
   <td>
      <div class="table-data-feature">
         <button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
         <i class="zmdi zmdi-edit"></i>
         </button>
         <button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
         <i class="zmdi zmdi-delete"></i>
         </button>
      </div>
   </td>
</tr>
<tr class="spacer" ng-repeat-end>...</tr>

Вы можете найти эту точную информацию здесь на их странице документации.

Ответ №2:

<tr> внутри <tr> недопустимый html. Вы должны включить ng-class="{'spacer': someCondition}"

<tr ng-repeat="x in controlList" class="tr-shadow" ng-class="{'spacer': someCondition}>

Ответ №3:

Попробуйте добавить условие ng-if=»$ last» к вашему разделителю