CODEWITHSUNDEEP
jqueryangularjs
Tom Nijs
Tom Nijs

Reputation: 3962

Add row to ng-repeated table

I'm looking for a way to dynamically add a row to a table that is populated by an ng-repeat. The row that I want to add does not conform the model that is being repeated, it is completely different in layout and content.

I could easily achieve this with jQuery but as I'm working in AngularJS, I started looking for a solution in Angular but with no success.

Each row has a button to show additional details and I would like this to fold open underneath the selected row.

<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>

The approach I would use with jQuery (in case this answers any questions):

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

Upvotes: 0

Views: 107

Answers (1)

Fissio
Fissio

Reputation: 3758

Use ng-repeat-start and ng-repeat-end, and use an open attribute in your schedules to indicate whether the details should be shown for each schedule.

A (rather crude) Plunker here, but it should help you get the idea: 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>

Upvotes: 3

Related Questions