Reputation: 14417
So I have this json:
var events = [
{
eventType: 2,
deviceOutputs: [
{
id: '23',
type: 'LED 1',
value: '2',
show: false
},{
id: '14',
type: 'LED 2',
value: '5',
show: false
}
]
},
{
eventType: 1,
deviceOutputs: [
{
id: '15',
type: 'LED 7',
value: '6',
show: false
},{
id: '14',
type: 'LED 2',
value: '5',
show: false
}
]
}
];
I display it in angular like so:
<table>
<thead>
<tr>
<th>Event Type</th>
<th>Device Outputs</th>
</tr>
</thead>
<tbody data-ng-repeat="event in events">
<tr>
<td>{{ event.eventType }}</td>
<td><div data-ng-repeat="device in event.deviceOutputs">
<h4 >{{ device.type }}<span class="caret"></span></h4>
<table data-ng-hide="device.show">
<tr>
<th>Value: </th><td>{{ device.value }}</td>
</tr>
</div></td>
</tr>
</tbody>
</table>
I want, every time I click the <h4>
it to show or hide the table of information :)
Upvotes: 1
Views: 1081
Reputation: 65043
You can add ng-click to your h4 to toggle the value of device.show:
<h4 ng-click="device.show=!device.show">
This makes it quite clear from the markup what is happening. If your hide/show logic becomes more complicated you can move it into a method on your controller.
Upvotes: 4