mpdegn mpdegn - 6 months ago 8
AngularJS Question

AngularJS: passing array information along

I have a table that lists several objects in an array using ng-repeat and I was wondering, if there is an easy way to let the user select one of these objects by clicking on the row and viewing them in a separate

<div>
.

Here's the table:

<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>

<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
</tbody>
</table>


Let's say the user clicked on the first row. He would now see a
<div>
that contains all the information in this row for that object.

<div>
{{campaigns[].name}}
...
</div>

Answer

It could be achieved by several way. One of them as below.

<table class="table">
<tbody class="table-hover">
<tr>
    <th scope="col">Name</th>
    <th scope="col">Type</th>
    <th scope="col">Approver</th>
</tr>

<tr ng-repeat-start="campaign in campaigns | filter: query" contenteditable="true" ng-click="campaign.showDetails = !campaign.showDetails">
    <td>{{ campaign.name }}</td>
    <td>{{ campaign.type }}</td>
    <td>{{ campaign.approver }}</td>
</tr>
<tr ng-repeat-end ng-show="campaign.showDetails">
   Your can dispalay here rest of the information from campaign object.
</tr>
</tbody>

You could seed the example http://codepen.io/anon/pen/beNbwp