AngularJS CheckBox conundrum

Question

Meine Ansicht hat

<input type="checkbox" class="check_box" ng-model="campaign.paused" 
     ng-click="CampaignPauseClicked(campaign, $event)" /> 

<p>campaign.paused == {{campaign.paused}}</p>       

mit der <p> für das Debuggen ist. Es zeigt false, wie es shoudl, die Daten gegeben, aber in der Steuerung

$scope.CampaignPauseClicked = function(campaign, $event) 
{ 
    campaign.paused = ! campaign.paused; 

, wenn ich auf der ersten Codezeile Haltepunkt, der Wert von campaign.paused ist true (!).

Ich habe den Code gesucht und campaign.paused wird nicht an anderer Stelle geschrieben.

Irgendeine Idee, was hier geschehen könnte?

---

[Update] Ich verwende eine ng-click fucntion, die ich nicht in seiner entirity gezeigt, weil ich es muss „schlucken“ die $event und verhindern, dass es zu den Eltern von propogating.

Answer 1

Das liegt daran, ng-model aktualisiert den Wert, wenn Sie auf das Kontrollkästchen klicken. Du annullierst, was Angular für dich tut.

Wenn Sie es selbst in Ihrer $scope.CampaignPauseClicked Funktion tun möchten, entfernen Sie den ng-model Teil aus dem HTML.

Andernfalls können Sie Angular lassen ihre Sache, lassen Sie die ng-model="campaign.paused" Klausel, und entfernen Sie die erste Zeile von Ihrem ng-click Rückruf.

Answer 2

Auch Sie können die durch die ng-change Direktive ersetzen, da Sie ein Kontrollkästchen verwenden. ng-change wird jedes Mal die Checkbox Zustand ausgeführt wird geändert (aktiviert/deaktiviert)

<input type="checkbox" class="check_box" ng-model="campaign.paused" 
     ng-change="CampaignPauseChanged ($event)" /> 

<p>campaign.paused == {{campaign.paused}}</p> 

Und in Ihrem Controller:

$scope.CampaignPauseChanged = function(event) 
{ 
    console.log(campaign.paused) 
    console.log(event) 
} 

Eine weitere Möglichkeit der ng-checkeddirective hier wäre ein Beispiel in diesem plunker. Wie Sie deutlich sehen können, gibt das Checkbox-Modell nur dann true zurück, wenn es aktiviert ist.