单击角度显示或隐藏表格的一部分

Question

所以我有这个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
            }
        ]
    }
];

我以角度显示它：

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

我想，每次点击<h4>来显示或隐藏信息表：）

Answer 1

您可以在h4中添加ng-click以切换device.show的值：

<h4 ng-click="device.show=!device.show">

从标记中可以清楚地看到发生了什么。如果隐藏/显示逻辑变得更复杂，您可以将其移动到控制器上的方法中。