Angular Checkbox, Initialwert unabhängig von ng-Modell

Es gibt viele Beiträge zu diesem Thema, aber keine haben meine Anforderungen noch erfüllt :( Das Problem ist das Folgende: Ich bin dabei, mehrere Geräte zu steuern, was bedeutet, dass ich nur lesen kann und in bestimmte Register schreibenAngular Checkbox, Initialwert unabhängig von ng-Modell

Es gibt so genannte Kanäle, einer ist (hardware specified) nur zum Lesen und der andere nur zum Schreiben.Dies ist zum Beispiel zum Ein- und Ausschalten des Geräts, Nullen und Einsen

Nun möchte ich den aktuellen Status anzeigen, sowie die Interaktionsmöglichkeit (über eine Checkbox) um es aus- und wieder einzuschalten, ich muss das getrennt halten, da die Kommunikationsintervalle nur sind alle paar Sekunden, und der Benutzer muss eine Rückmeldung haben, ob sein Befehl ordnungsgemäß verarbeitet wurde oder nicht (die Kommunikation oder der Befehl könnte stark verzögert oder unterbrochen sein, daher wird das Gerät weiterhin ausgeführt).

Jetzt: Am Anfang ist das Gerät eingeschaltet -> Bedeutung Lese-Kanal sendet 1 und ich kann das lesen. Jetzt möchte ich, dass der Schreibkanal als Checkbox zunächst entsprechend dem Wert des Reading-Channels überprüft wird. Dann, nach dem Befehl, wird der Lesekanal-Wert ändern (! Aber im Kopf behalten, kann es nicht zusammen begrenzt werden)

Ich versuchte es auf verschiedene Weise, in meinem Beispiel können Sie finden:

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

das war mein letzter Versuch. Der Wert ist da, aber er wird einfach nicht überprüfen :(.

Ich habe mehrere Threads gelesen, dass Sie ng-checked und ng-Modell getrennt halten sollten und ich weiß nur nicht, was ich sonst tun soll. Das Gerät/Kanalstruktur sind ziemlich ähnlich denen, die ich verwenden müssen, i vereinfacht es für dich

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

Mein 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)); 
    }; 
});

für eine Live-Version sehen das Plunker: http://plnkr.co/edit/vFvWjyQN14HKHAHvBKh5?p=preview

Vielen Dank im Voraus!

Quelle

2016-05-18 Andrea

das Problem, das ich sehe, ist, dass, wenn ich den Code "freigegeben" laufen: 0, und wenn i/deaktivieren Sie überprüfen: „freigegeben ": true /" aktiviert ": false – MayK

Nono. Das ist nicht das Problem;). Es sendet den richtigen Befehl an den anderen Teil, der hier nicht behandelt wird. Ich wollte es mit dem Befehl console.log betonen. – Andrea

haben Sie versucht, zwei Checkboxen zu erstellen, eine mit ng-checked und die andere mit ng-model und diese je nach Fall verstecken/anzeigen? – MayK

Ich würde vorschlagen, dass Sie den Wert für den schreibkanalaktivierten Wert auf den Wert von read-channel in Ihrem Controller initialisieren, da dies der Anfangspunkt ist. Wenn Sie das nicht möchten, würde ich empfehlen, das Kontrollkästchen nicht an das Modell zu binden und dann den Wert manuell über ng-click von ng-change festzulegen. Da Sie an das Modell gebunden sind und das Modell einen Wert hat, hat dieser Wert Vorrang vor dem, was Sie in ng-init tun, weil das Modell immer dann gelesen wird, wenn ein Digest-Zyklus beginnt.

Quelle

2016-05-18 12:15:13

Ich habe es noch nicht so gesehen. Ich werde Sie am Montag darüber informieren, wenn das klappt. Im Plunker scheint es wirklich vielversprechend! Manchmal bist du blind für die Lösung;). Ich war wirklich scharf auf ng-Modell hier. Sie werden als Antwort markiert, sobald ich am Montag zur Arbeit zurückkomme und es ausprobiere. Ihr letzter Satz klärte einige Verwirrungen auf dem Weg der Datenverarbeitung auf. – Andrea

Ich konnte es kaum erwarten. Ich ging zu arbeiten, um es auszuprobieren. Ich war tagelang fest daran. Ein ng-checked mit index-1 + ng-click hat es endlich geschafft :) – Andrea

Froh, dass es funktioniert hat. Geniesse dein Wochenende. :) –

If Ich verstehe dich richtig, ich habe einen Lösungsvorschlag für dich.

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

und einige Änderungen im Geräte obj:

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

Quelle

2016-05-18 13:08:18

Die Sache ist, Sie nehmen eine Abkürzung, die in diesem kleinen Szenario funktioniert, aber das kann ich nicht nehmen. Sie sehen, ich muss mehrere Geräte steuern, die ich mit IDs trennen, aber für das Interesse der Übersicht habe ich sie aus dem Code herausgehalten. Daher muss die Initialisierung innerhalb der ng-Wiederholung erfolgen. Jedes Gerät hat eine eindeutige ID und daher werden die generierten Kanäle verwendet. In ng-repeat kann ich sie unterscheiden, aber sie müssen im selben Umfang sein, denke ich ... – Andrea

Angular Checkbox, Initialwert unabhängig von ng-Modell

Antwort

Verwandte Themen