# Help with Angular HTML

**URL:** <https://discourse.nodered.org/t/help-with-angular-html/72096>\
**Category:** Dashboard\
**Created:** [12 December 2022 19:50 UTC](https://discourse.nodered.org/t/help-with-angular-html/72096 "2022-12-12T19:50:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tree-frog](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tree-frog/32/89303_2.png) [@tree-frog](https://discourse.nodered.org/u/tree-frog)\
**Post date:** [12 December 2022 19:50 UTC](https://discourse.nodered.org/t/help-with-angular-html/72096/1 "2022-12-12T19:50:38Z")

</div>

I have a simple table which has a list of errors. I almost have what I'm looking for except that I do not know how to return something correctly. What I'd like to accomplish here is to return an index of the row selected from ng-click to the output of the HTML template.

The table highlights the row and click sets the template output.

The ng-click is not sending any values to the output message except "socketid" and "\_msgid".

1. How can I get a value to the output message
2. How do I reference the index of the selected row from the table.

Please help.  
Thanks.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/3176315498c1c9f02fbc25fc0d1272dc58e65640.png)

```auto
<script>
var value = "TEST";
this.scope.action =function(){return value:}
</script>
<style>
    {{msg.style}}
</style>

<table>
  <tr><td>{{msg.col1_header}}</td><td>{{msg.col2_header}}</td></tr>
  <tr ng-repeat="obj in msg.payload" ng-click ="send({payload:action()})">

    <td width="1%">{{ obj.name || obj.First}}</td>
    <td width="99%">{{ obj.ip || obj.Last }}</td>

  </tr>
</table>
~~~
```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [12 December 2022 21:07 UTC](https://discourse.nodered.org/t/help-with-angular-html/72096/3 "2022-12-12T21:07:21Z")

</div>

Try

```auto
<script>
this.scope.action = function(value){return value}
</script>
<style>
    {{msg.style}}
</style>

<table>
  <tr><td>{{msg.col1_header}}</td><td>{{msg.col2_header}}</td></tr>
  <tr ng-repeat="obj in msg.payload" ng-click ="send({payload:action($index)})">

    <td width="1%">{{ obj.name || obj.First}}</td>
    <td width="99%">{{ obj.ip || obj.Last }}</td>

  </tr>
</table>

```

Also de-select pass-through and add output message to stored state.  
Example flow

```auto
[{"id":"bb393ea0830a192d","type":"inject","z":"452103ea51141731","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"ip\":1,\"name\":\"aa\"},{\"ip\":2,\"name\":\"bb\"}]","payloadType":"json","x":70,"y":4660,"wires":[["50612d14c11665d9"]]},{"id":"50612d14c11665d9","type":"ui_template","z":"452103ea51141731","group":"2d4fe667.28f8ba","name":"","order":17,"width":0,"height":0,"format":"<script>\nthis.scope.action = function(value){return value}\n</script>\n<style>\n {{msg.style}}\n</style>\n\n<table>\n <tr><td>{{msg.col1_header}}</td><td>{{msg.col2_header}}</td></tr>\n <tr ng-repeat=\"obj in msg.payload\" ng-click =\"send({payload:action($index)})\">\n\n <td width=\"1%\">{{ obj.name || obj.First}}</td>\n <td width=\"99%\">{{ obj.ip || obj.Last }}</td>\n\n </tr>\n</table>\n~~~","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":300,"y":4660,"wires":[["e2fe93020cc45980"]]},{"id":"e2fe93020cc45980","type":"debug","z":"452103ea51141731","name":"debug 111","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":470,"y":4640,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![tree-frog](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tree-frog/32/89303_2.png) [@tree-frog](https://discourse.nodered.org/u/tree-frog)\
**Post date:** [12 December 2022 22:26 UTC](https://discourse.nodered.org/t/help-with-angular-html/72096/4 "2022-12-12T22:26:05Z")

</div>

Still Nothing on the output message from template.

Thanks for the advice on $index passing it to the function and then back.

I tried this and I'm still not getting anything in the message payload from the template node still. I only get socketid and \_msgid. This script works well with another template node that's why I input the "TEST" value hard coded.

Kind Regards,

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [12 December 2022 22:33 UTC](https://discourse.nodered.org/t/help-with-angular-html/72096/5 "2022-12-12T22:33:22Z")

</div>

Working fine here

 ![chrome_screenshot_1670884345844](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/9/c97375c511d475b57902dbc5e37bbe0dbea6245e.png)

> [@tree-frog](#):
>
> `function(){return value:}`

You had a typo in your OG script `:` after value.  
does my example flow work for you?

---

<div class="post-metadata">

**Author:** ![tree-frog](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tree-frog/32/89303_2.png) [@tree-frog](https://discourse.nodered.org/u/tree-frog)\
**Post date:** [12 December 2022 22:56 UTC](https://discourse.nodered.org/t/help-with-angular-html/72096/6 "2022-12-12T22:56:14Z")

</div>

AH HA!  
I'm half blind. I was totally looking at this colon and seeing semi-colon.

No script errors in the template!

Thanks MUCH. Wasted a lot of time scratching my head on this one.

---

<div class="post-metadata">

**Author:** ![tree-frog](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tree-frog/32/89303_2.png) [@tree-frog](https://discourse.nodered.org/u/tree-frog)\
**Post date:** [14 December 2022 00:51 UTC](https://discourse.nodered.org/t/help-with-angular-html/72096/7 "2022-12-14T00:51:29Z")

</div>

I got it all working thanks to the expert advice and checking my code. The list is clickable to reference the array that is in a flow context variable(s). Using the index to send the error to a notification OK/Cancel. If OK, then remove the item from the array and log the acknowledged error and update the list showing the remainder of the list.

---

<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:** [13 January 2023 00:51 UTC](https://discourse.nodered.org/t/help-with-angular-html/72096/8 "2023-01-13T00:51:30Z")

</div>

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