нг-повтор, не повторяющий конкретный элемент - PullRequest
Новая
       3

нг-повтор, не повторяющий конкретный элемент

0 голосов
/ 18 марта 2019

Я использую Angularjs для повторения некоторых элементов в моем HTML. Angular повторяет div правильно, но при попытке повторить определенный 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>

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

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

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

Debugger

Ответы [ 3 ]

2 голосов
/ 18 марта 2019

Если вы действительно хотите включить вашу проставку в свою итерацию, есть еще одна опция, которая называется 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 голосов
/ 18 марта 2019

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

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

0 голосов
/ 18 марта 2019

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

...