Search code examples
htmlangularjsangular-ngmodelangularjs-ng-checked

Angular Checkbox, initial value independend from ng-model

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!

Solution

  • 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.