AngularJs複選框難題

我的觀點有AngularJs複選框難題

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

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

與<p>是進行調試。它顯示false，因爲它shoudl，給出的數據，但在控制器

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

當我斷點第一行代碼中，campaign.paused值true（！）。

我已經搜索了代碼並且campaign.paused沒有被寫入其他地方。

任何想法可能發生在這裏？

[更新]我使用的是ng-click溫控功能，我還沒有在條款內容顯示，因爲我需要它「吞噬」的$event並防止其propogating父。

來源

2016-04-24 Mawg

因爲你在做'campaign.paused =！ campaign.paused;'它正常的'campaign.paused'是真的 – Akis

我很抱歉，但我不明白你的評論（我的壞）。該聲明應該切換當前值。你看到有一些錯誤嗎？ – Mawg

其簡單。當你點擊複選框時，你的模型'ng-model =「campaign.paused」'得到'true'的值，這是由於Angular自動完成的。你在代碼中做的是反轉，並且在複選框沒有被點擊時爲真，當它爲真時爲false。看起來您需要閱讀ng-model指令https://docs.angularjs.org/api/ng/directive/ngModel – Akis

這是因爲ng-model在您單擊複選框時正在更新該值。你正在撤銷Angular爲你做的事情。

如果您想在$scope.CampaignPauseClicked函數中自己完成，請從html中刪除ng-model部分。

否則，您可以讓Angular做它的事情，離開ng-model="campaign.paused"子句，並從ng-click回調中刪除第一行。

來源

2016-04-24 13:54:54 yarons

Lolx！我怎麼能做出這樣一個無知的n00b錯誤？當然，你的正確（+1和答案）。我不需要切換檢查狀態，因爲'ng-model'正在爲我做這件事。多麼尷尬： -/ – Mawg

此外，您可以用ng-change指令代替ng-click，因爲您使用的是複選框。 ng-change將每次運行復選框狀態改變（選中/取消）

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

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

而在你的控制器：

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

另一種選擇將是ng-checkeddirective這裏是在這個plunker一個例子。正如您可以清楚地看到複選框模型僅在被選中時才返回true。

來源

2016-04-24 14:15:11 Akis

謝謝（+1）。我apoliogze，因爲我沒有解釋我需要使用'ng-clck' - 我現在更新了這個問題來解釋原因。 – Mawg

AngularJs複選框難題

回答

相關問題