Как отобразить данные с помощью angularJS Loop в 2 отдельные строки

Question

Как отобразить данные с помощью angularJS Loop в 2 отдельные строки

0

Я пытаюсь отображать продукты с использованием Angular JS loop.

<tr ng-repeat="od in OrderDetail">
    <td> {{ od.ProductName }} </td><br />
    <td  align='right'> {{ od.MRP }} </td>
    <td align='right'> {{ od.SellPrice }} </td>
    <td> {{ od.Quantity }} </td>
    <td align='right'> {{ od.Quantity * od.SellPrice | currency:""}}</td>
</tr>

Мое требование - отображать имя продукта в 1 строке, затем MRP, sellprice, количество, общее количество в следующей строке... и так далее.

Я пробовал после названия продукта, также я попытался использовать colspan = 5 для названия продукта. Ни один из них не работает.

Может кто-нибудь помочь мне в этом.

Devesh Agrawal 28 сен. 2015, в 19:33

Источник

0

если вы хотите вертикальное расположение, зачем использовать <table> ?
charlietfl 28 сен. 2015, в 17:08
0

Я не знаю ни о каком другом способе сделать это. Можете ли вы высказаться по этому поводу?
Devesh Agrawal 28 сен. 2015, в 17:09
0

Хорошо, поскольку <td> являются горизонтальными, почему не вложенные <div> или другие блочные элементы?
charlietfl 28 сен. 2015, в 17:10

Показать ещё 1 комментарий

Теги:

html

angularjs

2 ответа

0

Вы хотите ng-repeat-start и ng-repeat-end: https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points

Jack A. 28 сен. 2015, в 14:33

Ещё вопросы

если вы хотите вертикальное расположение, зачем использовать <table> ?
Я не знаю ни о каком другом способе сделать это. Можете ли вы высказаться по этому поводу?
Хорошо, поскольку <td> являются горизонтальными, почему не вложенные <div> или другие блочные элементы?

nickdnk · Accepted Answer · 2015-09-28T15-36-00.000Z

Это может быть то, что вы хотите:

<table>
  <tbody ng-repeat="od in OrderDetail" >
     <tr>
       <td colspan="4"> {{ od.ProductName }} </td>
      </tr>
     <tr>
       <td align='right'> {{ od.MRP }}  </td>
       <td align='right'> {{ od.SellPrice }}</td>
       <td>  {{ od.Quantity }}</td>
       <td align='right'> {{ od.Quantity * od.SellPrice | currency:""}}</td>
     </tr>
    </tbody>
</table>

И да, это нормально, чтобы иметь более одного <tbody>

EDIT: хорошая практика использовать :: для переменных в ngRepeat, если вы только меняете весь массив (например, обновляете массив) и не изменяете элементы в массиве. Это уменьшит количество наблюдателей.