0

このトピックには多くの投稿がありますが、まだ私の要件を満たしているものはありません:(問題は次のとおりです:私はいくつかのデバイスを制御しようとしています。つまり、特定のレジスタでしか読み書きできません。

いわゆるチャネルがあり、1 つは (ハードウェア指定) 読み取り専用で、もう 1 つは書き込み専用です。これは、たとえば、デバイスのオンとオフ、0 と 1 を切り替えるためのものです。

ここで、現在のステータスと、それをオフまたはオンにする相互作用の可能性 (チェックボックスを介して) を表示したいと考えています。通信間隔は数秒ごとであり、コマンドが適切に処理されたかどうかにかかわらず、ユーザーは何らかのフィードバックを得る必要があるため、それを分離しておく必要があります (通信またはコマンドが大幅に遅延したり壊れたりする可能性があるため、デバイスまだ実行されます）。

今：最初は、デバイスがオンになっています->つまり、Reading-Channelが1を送信しており、それを読み取ることができます. ここで、Reading-Channel の値に応じて、Writing チャネルをチェックボックスとして最初にチェックする必要があります。次に、コマンドの後、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));
     };
});

ライブ バージョンについては、プランカーを参照してください: http://plnkr.co/edit/vFvWjyQN14HKHAHvBKh5?p=preview

事前にどうもありがとうございました！

4

2 に答える 2

1

write-channel の有効な値をコントローラーで有効な read-channel の値に初期化することをお勧めします。それが開始点であるためです。それをしたくない場合は、チェックボックスをモデルにバインドせず、ng-change の ng-click を介して手動で値を設定することをお勧めします。モデルにバインドされており、モデルには値があるため、ダイジェスト サイクルが開始されるたびにモデルが読み取られるため、その値は ng-init で行うことよりも優先されます。

于 2016-05-18T12:15:13.753 に答える
0

私があなたのことを正しく理解しているなら、あなたのために解決策をいくつか提案します。

<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 }
  ]
};
于 2016-05-18T13:08:18.367 に答える