Добавить строку в таблицу с повторением ng

Question

Я ищу способ динамически добавить строку в таблицу, заполненную ng-repeat. Строка, которую я хочу добавить, не соответствует модели, которая повторяется, она полностью отличается по макету и контенту.

Я мог бы легко достичь этого с помощью jQuery, но когда я работаю в AngularJS, я начал искать решение в Angular, но без успеха.

В каждой строке есть кнопка, чтобы показать дополнительные сведения, и я хотел бы, чтобы это было открыто для открытия под выбранной строкой.

<table> 
     <thead> 
       <tr> 
         <td>Name</td> 
         <td>Details</td> 
         <td></td> 
       </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="schedule in schedules"> 
       <td><strong>{{ schedule.Name }}</strong></td> 
       <td> 
         Running for <b>{{ schedule.TotalHours }} Hours</b> a week<br/> 
         // Clicking this would show data underneath this row 
         <a href class="example">view details</a> 
       </td> 
       <td> 
         <button ng-click="attach(schedule)">USE</button> 
       </td> 
      </tr> 
     </tbody> 
</table> 

Подход, который я хотел бы использовать с JQuery (в случае, если это отвечает на любые вопросы):

$("table").on("click", ".example", function() { 
    $(this).closest("tr").after("<tr> .. stuff .. </tr>"); 
}); 

Answer 1

Использование ng-repeat-start и ng-repeat-end и использовать open атрибут в вашем расписании, чтобы указать, должна ли деталь быть для каждого графика.

A (довольно грубый) Plunker здесь, но это должно помочь вам получить идею: https://plnkr.co/edit/UKym8FxbdYi6g3LVCcQG?p=preview

JS:

$scope.schedules = [ 
    {name: 'first', details: 'Immah first'}, 
    {name: 'second', details: 'Immah second'}, 
    {name: 'third', details: 'Third details'}, 
    {name: 'fourth', details: 'Fourth details'} 
] 

HTML:

<table> 
    <tr> 
    <th>Name</th> 
    <th>Details</th> 
    </tr> 
    <tr ng-repeat-start="schedule in schedules" ng-click=""> 
    <td>{{schedule.name}}</td> 
    <td ng-click="schedule.open = !schedule.open">View details</td> 
    </tr> 
    <tr ng-repeat-end ng-show="schedule.open"> 
    <td colspan="3">{{schedule.details}}</td> 
    </tr> 
</table>