ng grid: есть ли способ отображать две строки на запись? (или HTML после строки?)

Я использую ng-grid, и я хотел бы иметь вторую строку, которая может быть дополнительно отображена в ng-grid, которая содержит меньшую сетку/список значений, относящихся к этой строке.

Вот грубый макет plunkr того, что я собираюсь сделать:

http://plnkr.co/edit/6Wgpk7jxJLDY7wv023Ne?p=preview

Есть ли способ сделать это с помощью ng-grid?


javascript angularjs ng-grid
person GSto    schedule 09.09.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вы просто заботитесь о главной детали: http://angular-ui.github.io/ng-grid/#/masterdetail

Обратите внимание, что вам не нужно показывать все столбцы в основной сетке.

Итак, если ваши данные выглядят так:

[
  {name: "John Doe", street: "123 Main St.", phone: "(555)555-0199", purchases: [] },
  {name: "Jane Doe", street: "123 Main St.", phone: "(555)555-0198", purchases: [{item: "hat", price: "12"}, {item: "yellow shoes", price: "125"}]}
];

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

 $scope.colDefs = [
    {field  : "name"},
    {field : "street"},
    {field  : "phone"}
    ];

и покажите дополнительные столбцы, как только вы выберете строку, добавив ее в опции сетки

selectedItems: $scope.mySelections

Наконец, для отображения дополнительных столбцов вы можете, например, использовать директиву ng-repeat

<div class="footer" ng-repeat="item in mySelections">
    <span class=header>Item</span>
    <span class=header>Price</span>
    <p ng-repeat="purchase in item.purchases">
          <span>{{purchase.item}}</span>
          <span>{{purchase.price}}</span>
    </p>
    </div>

Я сделал это в этом плункере: http://plnkr.co/iGz1RjOILjP2VZxEt1ny

person AardVark71    schedule 11.09.2013