このトピックには多くの投稿がありますが、まだ私の要件を満たしていません:( 問題は次のとおりです:私はいくつかのデバイスを制御しようとしています。角度チェックボックス、初期値は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、およびI /チェックを外して確認したとき:「有効":true /" enabled ":false – MayK
Nono。これは問題ではありません;)それはここでカバーされていない、他の部分に正しいコマンドを送信します。私はconsole.logコマンドで強調したかったのです。 – Andrea
あなたはng-checkedとng-modelの2つのチェックボックスを作成してみましたか? – MayK