How to get ng-click to work in a table

[zenofmud]

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:

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

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

[{"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.

[mickym2]

Instead of

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

use an object to return

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

You can also use payload.

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

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.

[zenofmud]

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