Ng-model in ui template

seanlholt · 2 January 2022 01:02

I'm trying to send updated values in msg.payload. I have a custom built input range slider with dual thumb handles. I've created a function scope.watch to send out the updated values. The INPUT selector I added ng-model="msg.payload" and ng-change='output(msg)". The problem is by adding the ng-model it locks the handle and it no longer works. If someone could review the flow and see if I'm missing anything??
Thanks,

[
    {
        "id": "8aa7b3cdf2188a40",
        "type": "ui_template",
        "z": "e864b9d9.8be538",
        "group": "994c39b6.c4d148",
        "name": "slider4",
        "order": 13,
        "width": "9",
        "height": "4",
        "format": "\n<!--<input ng-init=\"output(msg)\" class=\"sliderV size2x6\" id=\"sliderTop\" type=\"range\" min=1 max=255 step=1 value=60 ng-model=\"msg.payload\" aria-label=\"volume\" ng-change=\"output(msg)\">-->\n\n<div slider id=\"slider-distance\">\n      <div>\n        <div inverse-left style=\"width:70%;\"></div>\n        <div inverse-right style=\"width:70%;\"></div>\n        <div range style=\"left:30%;right:40%;\"></div>\n        <span thumb style=\"left:30%;\"></span>\n        <span thumb style=\"left:60%;\"></span>\n        <div sign style=\"left:30%;\">\n          <span id=\"value\" >30</span>\n        </div>\n        <div sign style=\"left:60%;\">\n          <span id=\"value\">60</span>\n        </div>\n      </div>\n      <input class=\"sliderV\" ng-init=\"output(msg)\" type=\"range\" tabindex=\"0\" value=\"30\" max=\"100\" min=\"0\" step=\"1\" oninput=\"\n      this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);\n      var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);\n      var children = this.parentNode.childNodes[1].childNodes;\n      children[1].style.width=value+'%';\n      children[5].style.left=value+'%';\n      children[7].style.left=value+'%';children[11].style.left=value+'%';\n      children[11].childNodes[1].innerHTML=this.value;\" ng-model=\"msg.payload\" ng-change=\"output(msg)\" />\n    \n      <input type=\"range\" tabindex=\"0\" value=\"60\" max=\"100\" min=\"0\" step=\"1\" oninput=\"\n      this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));\n      var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);\n      var children = this.parentNode.childNodes[1].childNodes;\n      children[3].style.width=(100-value)+'%';\n      children[5].style.right=(100-value)+'%';\n      children[9].style.left=value+'%';children[13].style.left=value+'%';\n      children[13].childNodes[1].innerHTML=this.value;\" />\n</div>\n\n<script>\n(function($scope) {\n    $scope.output = function(key) {\n        msg = \"test\"\n        console.log($scope)\n        if ($scope.hasOwnProperty(\"msg\")){\n            console.log('test')\n        //     if ($scope.msg.hasOwnProperty(\"socketid\") || $scope.msg.payload !== 9){ //this prevents output at 25% from initialization on ng-change\n\t\t      //  $scope.send({payload:$scope.msg.payload, socketid:$scope.msg.socketid});\n        //     }\n        }\n        \n    };\n})(scope);\n\n </script>\n\n<style>\n\n[slider] {\n  position: relative;\n  height: 14px;\n  border-radius: 10px;\n  text-align: left;\n  margin: 45px 0 10px 0;\n}\n\n[slider] > div {\n  position: absolute;\n  left: 13px;\n  right: 15px;\n  height: 14px;\n}\n\n[slider] > div > [inverse-left] {\n  position: absolute;\n  left: 0;\n  height: 14px;\n  border-radius: 10px;\n  background-color: #CCC;\n  margin: 0 7px;\n}\n\n[slider] > div > [inverse-right] {\n  position: absolute;\n  right: 0;\n  height: 14px;\n  border-radius: 10px;\n  background-color: #CCC;\n  margin: 0 7px;\n}\n\n[slider] > div > [range] {\n  position: absolute;\n  left: 0;\n  height: 14px;\n  border-radius: 14px;\n  background: linear-gradient(132deg, rgba(2,0,36,1) 0%, rgba(0,113,197,1) 92%);\n}\n\n[slider] > div > [thumb] {\n  position: absolute;\n  top: -7px;\n  z-index: 2;\n  height: 25px;\n  width: 30px;\n  text-align: left;\n  margin-left: -11px;\n  cursor: pointer;\n  box-shadow: -10px -5px 20px 0 #1a1a1a;\n  background-image: -moz-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n  border: 0;\n  border-radius: 0;\n  background-color: #0b0b0b;\n  outline: none;\n}\n\n[slider] > input[type=range] {\n  position: absolute;\n  pointer-events: none;\n  -webkit-appearance: none;\n  z-index: 3;\n  height: 14px;\n  top: -2px;\n  width: 100%;\n  -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n  filter: alpha(opacity=0);\n  -moz-opacity: 0;\n  -khtml-opacity: 0;\n  opacity: 0;\n}\n\ndiv[slider] > input[type=range]::-ms-track {\n  -webkit-appearance: none;\n  background: transparent;\n  color: transparent;\n}\n\ndiv[slider] > input[type=range]::-moz-range-track {\n  -moz-appearance: none;\n  background: transparent;\n  color: transparent;\n}\n\ndiv[slider] > input[type=range]:focus::-webkit-slider-runnable-track {\n  background: transparent;\n  border: transparent;\n}\n\ndiv[slider] > input[type=range]:focus {\n  outline: none;\n}\n\ndiv[slider] > input[type=range]::-ms-thumb {\n  pointer-events: all;\n  width: 28px;\n  height: 28px;\n  border-radius: 0px;\n  border: 0 none;\n  background: red;\n}\n\ndiv[slider] > input[type=range]::-moz-range-thumb {\n  pointer-events: all;\n  width: 28px;\n  height: 28px;\n  border-radius: 0px;\n  border: 0 none;\n  background: red;\n}\n\ndiv[slider] > input[type=range]::-webkit-slider-thumb {\n  pointer-events: all;\n  width: 28px;\n  height: 28px;\n  border-radius: 0px;\n  border: 0 none;\n  background: red;\n  -webkit-appearance: none;\n}\n\ndiv[slider] > input[type=range]::-ms-fill-lower {\n  background: transparent;\n  border: 0 none;\n}\n\ndiv[slider] > input[type=range]::-ms-fill-upper {\n  background: transparent;\n  border: 0 none;\n}\n\ndiv[slider] > input[type=range]::-ms-tooltip {\n  display: none;\n}\n\n[slider] > div > [sign] {\n  /* opacity: 0; */\n  position: absolute;\n  margin-left: -11px;\n  top: -45px;\n  z-index:3;\n  background: rgba(0,0,0,2);\n  color: #fff;\n  width: 28px;\n  height: 28px;\n  border-radius: 3px;\n  -webkit-border-radius: 3px;\n  align-items: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  text-align: center;\n  \n}\n\n[slider] > div > [sign]:after {\n  position: absolute;\n  content: '';\n  left: 0;\n  border-radius: 16px;\n  top: 21px;\n  border-left: 14px solid transparent;\n  border-right: 14px solid transparent;\n  border-top-width: 16px;\n  border-top-style: solid;\n  border-top-color: rgba(0,0,0,2);\n}\n\n[slider] > div > [sign] > span {\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 28px;\n}\n\n\n</style>\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "slider4",
        "x": 330,
        "y": 860,
        "wires": [
            [
                "e2fc8efc.33097"
            ]
        ]
    },
    {
        "id": "994c39b6.c4d148",
        "type": "ui_group",
        "name": "RRC Volume ",
        "tab": "57359bce.217934",
        "order": 1,
        "disp": true,
        "width": 9,
        "collapse": false
    },
    {
        "id": "57359bce.217934",
        "type": "ui_tab",
        "name": "Volume Control",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

seanlholt · 2 January 2022 23:50

Ok I think I solved my own problem. Unfortunately I don't know Angularjs very well, so I wasn't able to troubleshoot my original problem. However, I used fetch to send the data to my end point inside the UI template.

It would be great to know why by adding the ng-model attribute to the input tag prevents the slider handle from working.

if anyone is interested here's my updated flow.

[
    {
        "id": "8aa7b3cdf2188a40",
        "type": "ui_template",
        "z": "e864b9d9.8be538",
        "group": "994c39b6.c4d148",
        "name": "slider4",
        "order": 13,
        "width": "9",
        "height": "4",
        "format": "\n<!--<input ng-init=\"output(msg)\" class=\"sliderV size2x6\" id=\"sliderTop\" type=\"range\" min=1 max=255 step=1 value=60 ng-model=\"msg.payload\" aria-label=\"volume\" ng-change=\"output(msg)\">-->\n<div>{{msg.payload}}</div>\n<div slider id=\"slider-distance\">\n      <div>\n        <div inverse-left style=\"width:70%;\"></div>\n        <div inverse-right style=\"width:70%;\"></div>\n        <div range style=\"left:30%;right:40%;\"></div>\n        <span thumb style=\"left:30%;\"></span>\n        <span thumb style=\"left:60%;\"></span>\n        <div sign style=\"left:30%;\">\n          <span id=\"value\" >30</span>\n        </div>\n        <div sign style=\"left:60%;\">\n          <span id=\"value\">60</span>\n        </div>\n      </div>\n      <input class=\"range1\" type=\"range\" tabindex=\"0\" value=\"30\" max=\"100\" min=\"0\" step=\"1\" data-range1={{msg.payload}} oninput=\"\n      this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);\n      var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);\n      var children = this.parentNode.childNodes[1].childNodes;\n      children[1].style.width=value+'%';\n      children[5].style.left=value+'%';\n      children[7].style.left=value+'%';children[11].style.left=value+'%';\n      children[11].childNodes[1].innerHTML=this.value;\" />\n    \n      <input class=\"range2\" type=\"range\" tabindex=\"0\" value=\"60\" max=\"100\" min=\"0\" step=\"1\" data-range2={{msg.payload}} oninput=\"\n      this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));\n      var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);\n      var children = this.parentNode.childNodes[1].childNodes;\n      children[3].style.width=(100-value)+'%';\n      children[5].style.right=(100-value)+'%';\n      children[9].style.left=value+'%';children[13].style.left=value+'%';\n      children[13].childNodes[1].innerHTML=this.value;\" />\n</div>\n\n<script>\n\nvar rangeOne = document.querySelector(\".range1\")\nrangeOne.addEventListener('change', (event) => {\n    //console.log(rangeOne.getAttribute('data-range1'))\n    \n    let ip = rangeOne.getAttribute('data-range1')\n    fetch(`http://${ip}:1880/api/minmax/${rangeOne.value}?topics=mingain&cmds=cmd`)\n})\n\nvar rangeTwo = document.querySelector(\".range2\")\nrangeTwo.addEventListener('change', (event) => {\n    console.log(rangeTwo.getAttribute('data-range2'))\n    let ip = rangeTwo.getAttribute('data-range2')\n    fetch(`http://${ip}:1880/api/minmax/${rangeTwo.value}?topics=maxgain&cmds=cmd`)\n})\n</script>\n\n<style>\n\n[slider] {\n  position: relative;\n  height: 14px;\n  border-radius: 10px;\n  text-align: left;\n  margin: 45px 0 10px 0;\n}\n\n[slider] > div {\n  position: absolute;\n  left: 13px;\n  right: 15px;\n  height: 14px;\n}\n\n[slider] > div > [inverse-left] {\n  position: absolute;\n  left: 0;\n  height: 14px;\n  border-radius: 10px;\n  background-color: #CCC;\n  margin: 0 7px;\n}\n\n[slider] > div > [inverse-right] {\n  position: absolute;\n  right: 0;\n  height: 14px;\n  border-radius: 10px;\n  background-color: #CCC;\n  margin: 0 7px;\n}\n\n[slider] > div > [range] {\n  position: absolute;\n  left: 0;\n  height: 14px;\n  border-radius: 14px;\n  background: linear-gradient(132deg, rgba(2,0,36,1) 0%, rgba(0,113,197,1) 92%);\n}\n\n[slider] > div > [thumb] {\n  position: absolute;\n  top: -7px;\n  z-index: 2;\n  height: 25px;\n  width: 30px;\n  text-align: left;\n  margin-left: -11px;\n  cursor: pointer;\n  box-shadow: -10px -5px 20px 0 #1a1a1a;\n  background-image: -moz-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n  border: 0;\n  border-radius: 0;\n  background-color: #0b0b0b;\n  outline: none;\n}\n\n[slider] > input[type=range] {\n  position: absolute;\n  pointer-events: none;\n  -webkit-appearance: none;\n  z-index: 3;\n  height: 14px;\n  top: -2px;\n  width: 100%;\n  -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n  filter: alpha(opacity=0);\n  -moz-opacity: 0;\n  -khtml-opacity: 0;\n  opacity: 0;\n}\n\ndiv[slider] > input[type=range]::-ms-track {\n  -webkit-appearance: none;\n  background: transparent;\n  color: transparent;\n}\n\ndiv[slider] > input[type=range]::-moz-range-track {\n  -moz-appearance: none;\n  background: transparent;\n  color: transparent;\n}\n\ndiv[slider] > input[type=range]:focus::-webkit-slider-runnable-track {\n  background: transparent;\n  border: transparent;\n}\n\ndiv[slider] > input[type=range]:focus {\n  outline: none;\n}\n\ndiv[slider] > input[type=range]::-ms-thumb {\n  pointer-events: all;\n  width: 28px;\n  height: 28px;\n  border-radius: 0px;\n  border: 0 none;\n  background: red;\n}\n\ndiv[slider] > input[type=range]::-moz-range-thumb {\n  pointer-events: all;\n  width: 28px;\n  height: 28px;\n  border-radius: 0px;\n  border: 0 none;\n  background: red;\n}\n\ndiv[slider] > input[type=range]::-webkit-slider-thumb {\n  pointer-events: all;\n  width: 28px;\n  height: 28px;\n  border-radius: 0px;\n  border: 0 none;\n  background: red;\n  -webkit-appearance: none;\n}\n\ndiv[slider] > input[type=range]::-ms-fill-lower {\n  background: transparent;\n  border: 0 none;\n}\n\ndiv[slider] > input[type=range]::-ms-fill-upper {\n  background: transparent;\n  border: 0 none;\n}\n\ndiv[slider] > input[type=range]::-ms-tooltip {\n  display: none;\n}\n\n[slider] > div > [sign] {\n  /* opacity: 0; */\n  position: absolute;\n  margin-left: -11px;\n  top: -45px;\n  z-index:3;\n  background: rgba(0,0,0,2);\n  color: #fff;\n  width: 28px;\n  height: 28px;\n  border-radius: 3px;\n  -webkit-border-radius: 3px;\n  align-items: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  text-align: center;\n  \n}\n\n[slider] > div > [sign]:after {\n  position: absolute;\n  content: '';\n  left: 0;\n  border-radius: 16px;\n  top: 21px;\n  border-left: 14px solid transparent;\n  border-right: 14px solid transparent;\n  border-top-width: 16px;\n  border-top-style: solid;\n  border-top-color: rgba(0,0,0,2);\n}\n\n[slider] > div > [sign] > span {\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 28px;\n}\n\n\n</style>\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "slider4",
        "x": 550,
        "y": 680,
        "wires": [
            [
                "e2fc8efc.33097"
            ]
        ]
    },
    {
        "id": "994c39b6.c4d148",
        "type": "ui_group",
        "name": "RRC Volume ",
        "tab": "57359bce.217934",
        "order": 1,
        "disp": true,
        "width": 9,
        "collapse": false
    },
    {
        "id": "57359bce.217934",
        "type": "ui_tab",
        "name": "Volume Control",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

system · 16 January 2022 23:50

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

Topic		Replies	Views
UI Template Edit msg.payload then Output Dashboard node-red-dashboard , ui-template	9	246	23 March 2024
Sending msg.payload inside template function General	3	5412	9 November 2018
UI Template ng-click binding msg to ng-click to send Dashboard	3	106	10 April 2024
How can I set the value of msg.payload in the input box of input? Dashboard node-red-dashboard	2	814	14 March 2022
Ng-model checkbox Dashboard node-red-dashboard , ui-widgets	1	256	11 February 2023

Ng-model in ui template

Related topics