2016-05-18 8 views
0

このトピックには多くの投稿がありますが、まだ私の要件を満たしていません:( 問題は次のとおりです:私はいくつかのデバイスを制御しようとしています。角度チェックボックス、初期値はNGモデルから独立

これは、デバイスの電源をオン/オフするための、たとえば0と1の両方のチャネルのことをいい、読み込み専用のハードウェアと書き込み専用のハードウェアがあります。

私は、現在のステータスだけでなく、チェックボックスを介してそれをオフにする相互作用の可能性を表示したいと思います。コマンドが正常に処理されたかどうか(通信またはコマンドが大幅に遅れたり壊れたりする可能性があるため、デバイスはまだ動作しています)、ユーザーは何らかのフィードバックを持っていなければなりません。

Now:最初は、デバイスがオンです - >読み込みチャネルが1を送信しており、それを読み取ることができるという意味です。ここでは、チェックボックスとしての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="[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> 

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

ありがとうございます!

+0

私が見る問題は、 "有効" 私は、コードを実行するときにということである:0、およびI /チェックを外して確認したとき:「有効":true /" enabled ":false – MayK

+0

Nono。これは問題ではありません;)それはここでカバーされていない、他の部分に正しいコマンドを送信します。私はconsole.logコマンドで強調したかったのです。 – Andrea

+0

あなたはng-checkedとng-modelの2つのチェックボックスを作成してみましたか? – MayK

答えて

1

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

+0

私はまだこの方法を見ていない。これがうまくいくかどうか私は月曜日にお知らせします。プランカでは、それは本当に約束しているようだ!時にはあなたは解決策に目が見えません;)。私は本当にここのNGモデルに熱心でした。あなたは私が月曜日に仕事に戻るとすぐに回答としてマークされ、それを試してみます。 あなたの最後の文章は、データ処理の過程でいくつかの混乱を解消しました。 – Andrea

+1

私は待つことができませんでした。私はそれを試してみようと努力した。私はこの間何日も立ち往生した。 index-1 + ng-clickでng-checkedを実行すると、最終的には動作しました:) – Andrea

+1

うまくいけばうれしいです。週末をお楽しみください。 :) –

0

If私はあなたのことをよく理解しています。私はあなたに解決の提案をしています。

<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 } 
    ] 
}; 
+0

事は、この小さなシナリオで動作するショートカットを取ることですが、私は取ることができません。あなたは、私はIDで分かれているいくつかのデバイスを制御する必要がありますが、概要のために、私はコードから外しました。 したがって、ng-repeat内で初期化を行う必要があります。すべてのデバイスには固有のIDがあるため、生成されたチャネルにはIDが割り当てられます。 ng-repeatで私はそれらを区別することができますが、彼らは私が推測するのと同じ範囲になければなりません... – Andrea

関連する問題