Как добавить расширяемый блок дополнительной информации в строку таблицы, созданную в выражении Angular repeat?

Question

Как добавить расширяемый блок дополнительной информации в строку таблицы, созданную в выражении Angular repeat?

0

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

<table id="visible_table" class="table table-hover table-striped">
    <tr class="info">
        ...
    </tr>
    <tr ng-repeat="x in environment_service_packages | filter:isEnvironmentCorrect | orderBy:'service'">
        ...
    </tr>
</table>

Я хотел бы сделать каждую строку таблицы доступной, где дополнительная информация будет отображаться ниже этой линии. У меня есть дополнительная информация, уже сохраненная в модели. Однако я не могу заставить форматировать дополнительные данные для работы.

Моя первоначальная идея состояла в том, чтобы добавить дополнительный div в конце второго тега tr чтобы он включался в повторение. Мне удалось получить эту информацию, но каждая служебная информация появилась ниже таблицы, а не ниже строки таблицы, как и ожидалось.

Я также попытался сделать разрыв строки и сделать td который охватывал всю таблицу, но br не закончил изменять макет страницы вообще.

Я рассматривал возможность превратить каждую строку в простой div и полностью удалить структуру таблицы, но я хотел проверить с помощью SO, чтобы узнать, есть ли лучший способ в первую очередь.

Благодарю.

Lee Presswood 19 авг. 2015, в 17:12

Источник

1

Вы пробовали повторить начало \ конец? docs.angularjs.org/api/ng/directive/ngRepeat
user1334319 26 авг. 2015, в 14:17

Теги:

html

angularjs

2 ответа

1

Только для вашей информации: вы можете использовать ng-repeat-start и ng-repeat-end для выполнения этого (но в этом конкретном случае tbody лучше подходит вашим потребностям):

function MyCtrl($scope) {
  $scope.environment_service_packages = 
    [
      {name: 'obj1', info: {text: 'some extra info for obj1', show: true}},
      {name: 'obj2', info: {text: 'some extra info for obj2', show: false}},
    ];
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <table ng-controller="MyCtrl" class="table table-hover table-striped">
    <tr class="info">
      <td>...</td>
    </tr>
    <tr ng-repeat-start="x in environment_service_packages" ng-click="x.info.show = !x.info.show">
        <td> {{ x.name }}
    </tr>
    <tr ng-repeat-end ng-show="x.info.show">
       <td>
          {{ x.info.text }}
       </td>
     </tr>
  </table>
</body>

Пример использования ng-repeat-start и ng-repeat-end с заголовком/нижним колонтитулом

<header ng-repeat-start="item in items">
  Header {{ item }}
</header>
<div class="body">
  Body {{ item }}
</div>
<footer ng-repeat-end>
  Footer {{ item }}
</footer>

Artiom 27 авг. 2015, в 04:48

Ещё вопросы

Вы пробовали повторить начало \ конец? docs.angularjs.org/api/ng/directive/ngRepeat

Marcelo · Accepted Answer · 2015-08-26T13-09-00.000Z

Вы можете использовать <tbody> для перебора элементов <tr>:

function MyCtrl($scope) {
  $scope.environment_service_packages = 
    [
      {name: 'obj1', info: {text: 'some extra info for obj1', show: true}},
      {name: 'obj2', info: {text: 'some extra info for obj2', show: false}},
    ];
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <table ng-controller="MyCtrl" class="table table-hover table-striped">
    <tr class="info">
      <td>...</td>
    </tr>
    <tbody ng-repeat="x in environment_service_packages">
      <tr ng-click="x.info.show = !x.info.show">
        <td> {{ x.name }}
      </tr>
      <tr ng-show="x.info.show">
        <td>
          {{ x.info.text }}
        </td>
      </tr>
    </tbody>
  </table>
</body>

Я никогда не знал, что существует тег tbody . Спасибо за информацию. Наслаждайтесь своей щедростью!
@LeePresswood также стоит посмотреть на элемент <thead> !