# UI Template Button: ng-mousedown=start, ng-mouseup=stop

**URL:** https://discourse.nodered.org/t/ui-template-button-ng-mousedown-start-ng-mouseup-stop/7380
**Category:** Dashboard
**Created:** [29 January 2019 21:09 UTC](https://discourse.nodered.org/t/ui-template-button-ng-mousedown-start-ng-mouseup-stop/7380 "2019-01-29T21:09:52Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Dustin](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@Dustin](https://discourse.nodered.org/u/Dustin)
#### Post date: [29 January 2019 21:09 UTC](https://discourse.nodered.org/t/ui-template-button-ng-mousedown-start-ng-mouseup-stop/7380/1 "2019-01-29T21:09:52Z")

</div>

I am trying to make a bit of a dynamic dashboard. So far everything is working just fine...

I pull some data from a sqlite database (device name, device IP), generate buttons through the UI-Template using ng-repeat. When someone clicks on one of the buttons, it sends the correct device name and device IP address.

The ONLY part I can't figure out is how to add an additional value when ng-mousedown and ng-mouseup.

Right now... the payload is:

msg.payload = null  
msg.devicename = device name  
msg.ipaddress = device ipaddress

I need to set msg.payload to string "start" on ng-mousedown, and "stop" on mouseup. Here is the code in my UI Template:

```
<md-list>
    <md-list-item ng-repeat="payload in msg.payload">
        <md-button class="md-ink-ripple" ng-mousedown="send(payload)" ng-mouseup="send(payload)">{{payload.devicename}}</md-button>
    </md-list-item>
</md-list>

```

What do I need to add to this to set the msg.payload to start/stop on mousedown/mouseup without losing/overwriting my other data?

Thanks in advance!

---

<div class="post-metadata">

### Author: ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)
#### Post date: [29 January 2019 23:18 UTC](https://discourse.nodered.org/t/ui-template-button-ng-mousedown-start-ng-mouseup-stop/7380/2 "2019-01-29T23:18:41Z")

</div>

Look at the following thread for tips on how to do that: [Momentary button on Dashboard](https://discourse.nodered.org/t/momentary-button-on-dashboard/4906/5?u=hugobox)

---

<div class="post-metadata">

### Author: ![Dustin](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@Dustin](https://discourse.nodered.org/u/Dustin)
#### Post date: [30 January 2019 00:18 UTC](https://discourse.nodered.org/t/ui-template-button-ng-mousedown-start-ng-mouseup-stop/7380/3 "2019-01-30T00:18:31Z")

</div>

Awesome, ty! This looks like it gives me exactly what I was looking for! 🙂

---

<div class="post-metadata">

### Author: ![Dustin](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@Dustin](https://discourse.nodered.org/u/Dustin)
#### Post date: [30 January 2019 16:35 UTC](https://discourse.nodered.org/t/ui-template-button-ng-mousedown-start-ng-mouseup-stop/7380/4 "2019-01-30T16:35:09Z")

</div>

Got this to work using your suggestion.... just wanted to post the code for anyone else looking for it.

I updated the original payload to include the "start" and then mouseup to just send the "stop":

```
<md-list class="momentary">
    <md-list-item ng-repeat="payload in msg.payload">
        <md-button class="md-ink-ripple" ng-mousedown="send(payload)">{{payload.devicename}}</md-button>
    </md-list-item>
</md-list>

<script>

(function($scope) {
    
$('.momentary').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": "stop"});
});
    
})(scope);
</script>

```

Thanks again!