Angular Checkbox, initial value independend from ng-model

Question

There are many postings on this topic, but none have met my requirements yet :( The problem is the following: I am about to control several devices, meaning i can only read and write in certain registers.

There are so called channels, one is (hardware specified) only for reading, and the other only for writing. This is for example for turning the device on and off, 0's and 1's.

Now, i want to display the current status, as well as the interaction possibility (via a checkbox) to turn it off and on. I have to keep that separated, because the communication-intervals are only every few seconds, and the user shall have some feedback, if his command has been processed properly or not (the communication or command could be greatly delayed or broken, therefore the device will still be running).

Now: In the beginning, the device is on -> meaning Reading-Channel is sending 1 and i can read that. Now i want the Writing channel, as a checkbox, be initially checked according to the value of the Reading-Channel. Then, after the command, the Reading-Channel value will change (but keep in mind, it may not be bounded together!)

I tried it in several ways, in my example you can find:

ng-init="device.channels[$index-1].enabled==1"

which was my last attempt. The Value is there, but he just will not check :(.

I've read several threads, that you should keep ng-checked and ng-model separated and i just dont know what to do else. The device/channel structure are pretty similar to the ones i will have to use, i just simplified it for you.

My HTML:

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <script data-require="[email protected]" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
   <body ng-controller="MainCtrl">
    <legend>UI</legend>
    <div ng-repeat="channel in device.channels" ng-switch on="channel.name"> 
      <span ng-switch-when="Read-Channel">    
        <p ng-if="channel.enabled==1">Device is ON</p>
        <p ng-if="!channel.enabled==0">Device is OFF</p>                            
      </span>   
          <!-- initial problem -->
      <span ng-switch-when="Write-Channel"> 
           <input type="checkbox"
             ng-init="device.channels[$index-1].enabled==1"
             ng-model="channel.enabled"
             ng-change="stateChanged(channel.enabled)">
           Device is off: {{ channel.enabled == 1 }} 
      </span>
    </div>        
    <legend>Data</legend>
    <div>
      {{ device | json }}
    </div>
  </body>   
</html>

My JS:

var app = angular.module('plunker', []);   
app.controller('MainCtrl', function($scope) {
  $scope.device = { 
    channels: [
      { name: 'Read-Channel', enabled: 1 }, 
      { name: 'Write-Channel', enabled: 0 }
    ]
    };       
    $scope.stateChanged = function(value){
      console.log("Sending command to turn device off?" + (value == 1));
     };
});

For a live version see the Plunker: http://plnkr.co/edit/vFvWjyQN14HKHAHvBKh5?p=preview

Thank you very much in advance!

the problem i see is that when i run the code "enabled": 0 , and when i check/uncheck : "enabled": true /"enabled": false — MayK
– MayK, Commented May 18, 2016 at 12:00
Nono. this is not the problem ;). It will send the correct command to the other part, that is not covered here. I wanted to emphazise it with the console.log command. — Andrea
– Andrea, Commented May 18, 2016 at 12:04
did you try making two checkboxes, one with ng-checked and the other one with ng-model and hide/show them depending on you cases ? — MayK
– MayK, Commented May 18, 2016 at 12:08
Ah, i see i am too deep into this to make it clear :X. No, i want just one checkbox. The Reading-Channel is more the visualization of the current status. I can only get values from the device on the physical adress, which is covered by the reading-channel. The checkbox, for the writing, is another physical adress, whereas the device allows a input (0's and 1's). Thanks for your time, the other 2 answers here seem to push me in the right direction :) — Andrea
– Andrea, Commented May 18, 2016 at 21:06

Mike Feltman · Accepted Answer · 2016-05-18 12:15:13Z

1

I would suggest that you just initialize the write-channel enabled value to the value of read-channel enabled in your controller since that's what you want it to start at. If you don't want to do that, then I would recommend not binding the checkbox to the model and then setting the value manually via ng-click of ng-change. Since you're bound to the model and the model has a value, that value is going to take precedence over whatever you do in ng-init because the model is going to be read whenever a digest cycle kicks in.

answered May 18, 2016 at 12:15

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrea Over a year ago

I did not see it this way yet. I will inform you on monday if this worked out. In the plunker, it really seems promissing! Sometimes you are blind to the solution ;). I was really keen on ng-model here. You will be marked as a answer as soon as i return to work on monday and tried it out. Your last sentence cleared up some confusions on the way of data handling.

Andrea Over a year ago

I couldn't wait. i Headed to work to try it out. i was stuck for days on this. Doing a ng-checked with index-1 + ng-click made it finally working :)

Coffee-Tea · Accepted Answer · 2016-05-18 13:08:18Z

0

If I've understand you right, I have some proposal of solving for you.

<body ng-controller="MainCtrl">
<legend>UI</legend>
<input type="checkbox"
 ng-model="device.enabledChannel"
 ng-change="stateChanged(device.enabledChannel)">
<div ng-repeat="channel in device.channels">
  <span ng-show="channel.enabled == device.enabledChannel"> 
        <p ng-if="channel.enabled">Device is ON</p>
        <p ng-if="!channel.enabled">Device is OFF</p>                           
        Device is off: {{ channel.enabled == 1 }} 
  </span>

</div>

<legend>Data</legend>
<div>
  {{ device | json }}
</div>

and some changes in device obj:

$scope.device = {
  enabledChannel: true,
  channels: [
    { name: 'Read-Channel', enabled: 1 }, 
    { name: 'Write-Channel', enabled: 0 }
  ]
};

answered May 18, 2016 at 13:08

Coffee-Tea

1,19810 silver badges10 bronze badges

1 Comment

Andrea Over a year ago

The thing is, you take a shortcut, that works in this little scenario, but that i am not able to take. You see, i have to control several devices, that i separate with ID's, but for the interest of the overview, i kept them out of the code. Therefore, the initialisation has to happen within the ng-repeat. Every device has a unique ID, and therefore it's generated channels will have. In ng-repeat i can distinguish them, but they have to be in the same scope i guess...

Collectives™ on Stack Overflow

Angular Checkbox, initial value independend from ng-model

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related