Angular show or hide part of table on click

Question

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

Brocco · Accepted Answer · 2014-04-08 15:55:42Z

4

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.

answered Apr 8, 2014 at 15:55

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Callum Linington Over a year ago

nah that is exactly what I need, really simple, I'm a knockout man myself

Collectives™ on Stack Overflow

Angular show or hide part of table on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related