Input type=checkbox toggle state

Dashboard
1

Hi all,
Angular (or web) is not my strong side, so here I am with a noob question :slight_smile:
I have a dashboard's template widget within which I'm trying to switch the checked state for input type=checkbox based on a property job.isSelected, but somehow I can't figure this out. Below is what I tried based on some hints from Internet, but it didn't help.

<input type="checkbox"
    style="margin: 0; padding 0; height:11px"
    ng-click="send({payload: job.name})"
    [checked]="job.isSelected" />

I need to add the attribute checked dynamically.

2

Sorry, not my area of expertise either but maybe this will bump up the question for someone else to pitch in :grinning:

1 Like
3

May be something like this can help out.

[{"id":"dc924937.4d7d58","type":"ui_template","z":"bf66f153.dd752","group":"150516d9.b8a0a9","name":"","order":0,"width":0,"height":0,"format":"<input type=\"checkbox\" id=\"{{'checkbox_'+$id}}\" style=\"margin:auto;\"/>\n<script>\n(function(scope) {\n \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(document.getElementById(\"checkbox_\"+scope.$id)){\n            document.getElementById(\"checkbox_\"+scope.$id).checked = msg.payload\n        }\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":900,"y":200,"wires":[[]]},{"id":"942d0906.f7c578","type":"ui_button","z":"bf66f153.dd752","name":"","group":"150516d9.b8a0a9","order":1,"width":0,"height":0,"passthru":false,"label":"TRUE","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":730,"y":180,"wires":[["dc924937.4d7d58"]]},{"id":"82d3a96.e844258","type":"ui_button","z":"bf66f153.dd752","name":"","group":"150516d9.b8a0a9","order":1,"width":0,"height":0,"passthru":false,"label":"FALSE","tooltip":"","color":"","bgcolor":"","icon":"","payload":"false","payloadType":"bool","topic":"","x":720,"y":220,"wires":[["dc924937.4d7d58"]]},{"id":"ea61fda7.3b6f","type":"ui_ui_control","z":"bf66f153.dd752","name":"","events":"all","x":720,"y":80,"wires":[["15899af7.e27665"]]},{"id":"15899af7.e27665","type":"delay","z":"bf66f153.dd752","name":"","pauseType":"delay","timeout":"50","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":870,"y":80,"wires":[["a1ca8795.9ae5b8"]]},{"id":"a1ca8795.9ae5b8","type":"change","z":"bf66f153.dd752","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"job","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":840,"y":140,"wires":[["dc924937.4d7d58"]]},{"id":"150516d9.b8a0a9","type":"ui_group","z":"","name":"HOME","tab":"5b51be56.a85e4","order":1,"disp":true,"width":"4","collapse":false},{"id":"5b51be56.a85e4","type":"ui_tab","z":"","name":"ICONS","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
4

Your solution seems to toggle the state via javascript code.
Is there any way I can dynamically add checked attribute by evaluating the angular-boolean value?

5

Ui_control part makes it for initial state based on on some value. Wasn't that the question

6

I've found the solution. It can be done in two ways. :slight_smile:

  1. When using HTML, you need to make use of ng-checked to bind the value:
   <input type="checkbox"
      ng-click="send({payload: job.name})"
      ng-checked="job.isSelected" />
  1. When using AngularJS Material:
   <md-checkbox
      ng-click="send({payload: job.name})"
      ng-model="job.isSelected">
      {{job.name}}
   </md-checkbox>
3 Likes
7

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