Question

我有以下HTML

<div ng-repeat="campaign in campaigns" >
    <label for="campaignPaused">Paused</label>
    <input type="checkbox" ng-model="campaign.paused"class="check_box" />
    <p>campaign.paused == {{campaign.paused}}</p>

最初，调试文本显示$scope.campaign.paused为false，这是正确的，并且复选框已正确取消选中。

如果单击该复选框，则调试文本将更改为true，但视觉上未选中此复选框。

对该复选框的后续点击无效。

现在对于奇怪的部分：如果我删除ng-click="CampaignClicked($event, campaign.campaign_id)"，那么复选框可以正常工作！

啊哈！，我想 - 复选框上的点击是与其父级相关的。而且，虽然CampaignClicked()只是吞下了这个事件并且返回了，但它并没有被点击。

为了使事情更清楚，我将复选框更改为

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

我宣布了

$scope.SwallowClick = function($event)
{
   if ($event.cancelable) 
       $event.preventDefault();

     $event.stopPropagation();   

   return false;   // don't handle event further
}

但是，复选框仍然像以前一样。

谁能明白为什么？（注意，如果我在DIV之前移动复选框，它可以正常工作）

Answer 1

你的问题在这里

if ($event.cancelable) 
       $event.preventDefault();

它阻止了复选框内的进一步操作。从您的活动中删除该代码。

来自 event.preventDefault()

如果调用此方法，则事件的默认操作不会触发

的 DEMO

奇怪的AngularJS复选框behviour

1 个答案: