Angular Checkbox，初始值独立于 ng-model答案

【问题标题】：Angular Checkbox, initial value independend from ng-modelAngular Checkbox，初始值独立于 ng-model
【发布时间】：2016-05-18 11:48:00
【问题描述】：

有很多关于这个主题的帖子，但没有一个符合我的要求:( 问题如下：我即将控制几个设备，这意味着我只能在某些寄存器中读写。

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

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

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

我尝试了多种方式，在我的示例中您可以找到：

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

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

我已经阅读了几个主题，您应该将 ng-checked 和 ng-model 分开，我只是不知道还能做什么。设备/通道结构与我必须使用的非常相似，我只是为您简化了。

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

非常感谢您！

【问题讨论】：

我看到的问题是，当我运行代码“启用”：0，当我选中/取消选中：“启用”：真/“启用”：假
诺诺。这不是问题;)。它将向另一部分发送正确的命令，此处未涉及。我想用 console.log 命令来强调它。
您是否尝试过制作两个复选框，一个带有 ng-checked，另一个带有 ng-model 并根据您的情况隐藏/显示它们？
啊，我知道我太深入了，无法说清楚：X。不，我只想要一个复选框。阅读频道更多的是当前状态的可视化。我只能从读取通道覆盖的物理地址上的设备获取值。用于写入的复选框是另一个物理地址，而设备允许输入（0 和 1）。感谢您的宝贵时间，这里的其他 2 个答案似乎将我推向了正确的方向 :)

标签： html angularjs angular-ngmodel angularjs-ng-checked

【解决方案1】：

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

【讨论】：

我还没有这样看。如果这成功了，我会在星期一通知你。在 plunker 中，它看起来真的很有前途！有时您对解决方案视而不见；）。我真的很喜欢这里的 ng-model。一旦我周一返回工作并尝试过，您将被标记为答案。您的最后一句话澄清了数据处理方式上的一些困惑。
我等不及了。我去工作尝试一下。我被困了好几天。使用 index-1 + ng-click 进行 ng-checked 使其最终正常工作:)

【解决方案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>

以及设备 obj 的一些变化：

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

【讨论】：

问题是，你走捷径，在这个小场景中有效，但我不能走。你看，我必须控制几个设备，我用 ID 分开，但为了概述的利益，我将它们排除在代码之外。因此，初始化必须在 ng-repeat 中进行。每台设备都有一个唯一的 ID，因此它生成的频道也会有。在 ng-repeat 我可以区分它们，但我猜它们必须在同一范围内......