Angular 复选框，初始值独立于 ng-model

Question

关于这个主题的帖子很多，但是none已经满足了我的要求:( 问题如下：我要控制几个设备，也就是说我只能读写某些寄存器。

有所谓的通道，一个是（硬件指定的）只读，一个只写。这例如用于打开和关闭设备，0 和 1。

现在，我想显示当前状态，以及关闭和打开它的交互可能性（通过复选框）。我必须把它分开，因为通信间隔只是每隔几秒，用户应该得到一些反馈，如果他的命令被正确处理或不正确（通信或命令可能会大大延迟或中断，因此设备仍将是运行).

现在：开始时，设备处于打开状态 -> 意味着阅读通道正在发送 1，我可以阅读。现在我希望 Writing 通道作为一个复选框，最初根据 Reading-Channel 的值进行检查。然后，在命令之后，Reading-Channel 值会改变（但请记住，它可能不会绑定在一起！）

我尝试了几种方法，在我的例子中你可以找到：

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

这是我最后一次尝试。价值在那里，但他只是不会检查:(。

我读过几个线程，你应该将 ng-checked 和 ng-model 分开，我只是不知道还能做什么。 device/channel 结构与我将要使用的结构非常相似，我只是为您简化了它。

我的HTML:

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <script data-require="angular.js@1.2.20" 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>

我的 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));
     };
});

对于实时版本，请参阅 Plunker：http://plnkr.co/edit/vFvWjyQN14HKHAHvBKh5?p=preview

非常感谢您！

Answer 1

我建议您只需将 write-channel enabled 值初始化为控制器中 read-channel enabled 的值，因为这是您希望它开始的值。如果您不想这样做，那么我建议不要将复选框绑定到模型，然后通过 ng-click 或 ng-change 手动设置值。由于您绑定到模型并且模型具有值，因此该值将优先于您在 ng-init 中执行的任何操作，因为只要摘要循环开始，就会读取模型。

Answer 2

如果我没理解错的话，我有一些解决方案给你。

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

以及设备对象的一些变化：

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

Angular 复选框，初始值独立于 ng-model

Angular Checkbox, initial value independend from ng-model

html

angularjs

angular-ngmodel

angularjs-ng-checked