# How to get ng-click to work in a table

**URL:** <https://discourse.nodered.org/t/how-to-get-ng-click-to-work-in-a-table/58246>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [12 February 2022 23:37 UTC](https://discourse.nodered.org/t/how-to-get-ng-click-to-work-in-a-table/58246 "2022-02-12T23:37:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 February 2022 23:37 UTC](https://discourse.nodered.org/t/how-to-get-ng-click-to-work-in-a-table/58246/1 "2022-02-12T23:37:19Z")

</div>

I'm sending an array to a ui-template node creating a table. I want to be able to click on one of the cells in the table and have that cell value returned.

In my test case each row has a hostname and an IP and I want to click on the hostname and return that value. Here is what the dashboard looks like:  
 ![Screen Shot 2022-02-12 at 6.31.32 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/4/b4169c19eb44ebf0c2148db5c7f7a94db74560e9.png)  
So if I click on 'YELLOWPI' I want that value returned. The attached test flow has an inject with the array defined, the ui-template and a debug. The u-template is

```auto
<div id="template_test">

<br/>
<table id="table" border="1">
    <tbody style="text-align: center">
    <tr>
        <th>hostname</th> 
        <th>IP</th> 
    </tr>
    <tbody style="text-align: center">
        <tr ng-repeat="x in msg.payload">

            <td ng-if='x.device_status == 1' class="device_online"> 
                <md-button ng-click="send({x.hostname})">{{x.hostname}}</md-button>
            </td>
            <td ng-if='x.device_status == 1' class="device_online" >{{x.ip}}</td>

            
         </tr>
    </tbody>
</table>

</div>

```

and here is the test flow:

```auto
[{"id":"1256d35dfbc11ddf","type":"inject","z":"051e27337d4d1064","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"hostname\":\"fastpi\",\"ip\":\"192.168.48.61\",\"device_status\":1},{\"hostname\":\"yellowpi\",\"ip\":\"192.168.48.62\",\"device_status\":1}]","payloadType":"json","x":250,"y":180,"wires":[["0d7a57383bef4b14"]]},{"id":"2ece9bc73b9a3dca","type":"ui_template","z":"051e27337d4d1064","group":"97e92d09ba3aa4c6","name":"CSS for colors3","order":3,"width":"0","height":"0","format":"<style>\n .nr-dashboard-cardpanel {\n border: 1px solid black;\n }\n\n #Home_Enter_the_IP_of_a_GHOST_device_and_press_DELETE_to_delete_it .nr-dashboard-cardcontainer > .visible,\n #Home_Enter_the_IP_of_a_GHOST_device_and_press_DELETE_to_delete_it {\n background-color: #ff9393 !important;\n test-align: center;\n }\n .nr-dashboard-cardpanel > p {\n text-align: center;\n color: #000 !important;\n }\n .device_offline {\n xbackground-color: #fcf2ba;\n xbackground-color: #ff6457;\n background-color: #ffa0a8;\n }\n .device_online {\n background-color: #dcffcc; \n color: #000000;\n }\n .warning_color {\n background-color: #f3ffb8;\n }\n .warning_red {\n background-color: #ff0000;\n }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":460,"y":220,"wires":[[]]},{"id":"0d7a57383bef4b14","type":"ui_template","z":"051e27337d4d1064","group":"97e92d09ba3aa4c6","name":"Test array3","order":2,"width":"8","height":"4","format":"<h2 style=\"text-align: center;\">Test array </h2>\n\n<div id=\"template_test\">\n\n<br/>\n<table id=\"table\" border=\"1\">\n <tbody style=\"text-align: center\">\n <tr>\n <th>hostname</th> \n <th>IP</th> \n </tr>\n <tbody style=\"text-align: center\">\n <tr ng-repeat=\"x in msg.payload\">\n\n <td ng-if='x.device_status == 1' class=\"device_online\"> \n <md-button ng-click=\"send({x.hostname})\">{{x.hostname}}</md-button>\n </td>\n <td ng-if='x.device_status == 1' class=\"device_online\" >{{x.ip}}</td>\n\n \n </tr>\n </tbody>\n</table>\n\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":450,"y":180,"wires":[["950989633394565f"]]},{"id":"950989633394565f","type":"debug","z":"051e27337d4d1064","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":670,"y":180,"wires":[]},{"id":"97e92d09ba3aa4c6","type":"ui_group","name":"Default","tab":"22ce87020b3503e5","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"22ce87020b3503e5","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

any pointers will be appreciated.

---

<div class="post-metadata">

**Author:** ![mickym2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mickym2/32/36128_2.png) [@mickym2](https://discourse.nodered.org/u/mickym2)\
**Post date:** [12 February 2022 23:57 UTC](https://discourse.nodered.org/t/how-to-get-ng-click-to-work-in-a-table/58246/2 "2022-02-12T23:57:26Z")

</div>

Instead of

```auto
<md-button ng-click="send({x.hostname})">{{x.hostname}}</md-button>

```

use an object to return

```auto
<md-button ng-click="send({host: x.hostname})">{{x.hostname}}</md-button>

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/0227c61fcd8626e1d86101e51d7277df162ea994.png)

You can also use payload. 😉

```auto
<md-button ng-click="send({payload: x.hostname})">{{x.hostname}}</md-button>

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/24c2d417bad798b268658bc200442ac3d7a5a942.png)

However I do not know - why the node has to be reinitialized when you click on the first button. But I am sure you will find that out.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 February 2022 00:52 UTC](https://discourse.nodered.org/t/how-to-get-ng-click-to-work-in-a-table/58246/3 "2022-02-13T00:52:42Z")

</div>

@mickym2 EXCELLENT!  
Thanks so much! I have yet (if I ever will) gotten my head wrapped around this stuff. This is just what I needed to use in my project to keep track of all Pi's on a LAN. I should be posting it in a few days.

Thanks again!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 February 2022 00:53 UTC](https://discourse.nodered.org/t/how-to-get-ng-click-to-work-in-a-table/58246/4 "2022-02-27T00:53:25Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.