Javascript 停止单击复选框列表

我在angularJS上有ng重复复选框。我正在使用库实现多个带有ng repeat的复选框。我要求用户只能单击最大数量的复选框。我使用了$event.stopPropagation，它可以工作，但是ng模型没有更新，因为我不知道如何访问复选框列表

控制器

$scope.mealCBChanged = function($event, mc){
    if(mc.selectedCBId.length > 2){
        $event.preventDefault();
        alert("You can't select more than " + 2);
    }
}

HTML

<div ng-repeat="mc in mealC">
 <div ng-repeat="m in mc.meals">
  <input type="checkbox" name="{{ m.id }}" 
         id="{{ m.name }}" 
         checklist-model="mc.selectedCBId" 
         ng-init="mc.selectedCBId = []" 
         ng-click="mealCBChanged($event, mc)" 
         checklist-value="m.name"/>
  <label for="{{ m.name }}"><span class="checkbox primary primary"><span></span></span>{{ m.name }}</label>
 </div>
</div>

{{m.name}}

问题

当我选中第三个复选框时，会调用警报，而第三个复选框不会单击，因为$event.preventDefault（）工作正常。但是mc.selectedCBId在数组中有3项，它应该有两项

---

将输入绑定到数组以外的变量，例如：另一个_变量 在html中： 检查表模型=“另一个变量”

在您的代码中：

if(mc.selectedCBId.length == 2){
    mc.selectedCBId = another_variable;

}

if(mc.selectedCBId.length == 2){
    $event.preventDefault();
    mc.selectedCBId = another_variable;
}
if(mc.selectedCBId.length > 2){
    alert("You can't select more than 2" );
}

---

从纯角度来看——不依赖于复选框列表，您可以尝试以下方式：

编辑：我添加了嵌套的ngRepeats，并将checkCount的范围移动到每个mealC节点中，这样OP就可以看到如何使用纯角度而不是依赖第三方库使嵌套数据与复选框一起工作。第三方库有时很棒，但有时它们会增加比简单需求所需的更多的开销

var myApp=angular.module（'myApp'，[]）；
//指令（'myDirective'，function（）{}）；
//工厂（'myService'，function（）{}）；
函数MyCtrl（$scope）{
$scope.mealC=[
{
支票计数：0，
膳食：[{id:1，姓名：“foo”}，{id:2，姓名：“bar”}，{id:3，姓名：“baz”}]
}, {
支票计数：0，
膳食：[{id:11，姓名：“肉汁”}，{id:12，姓名：“蛋糕”}，{id:13，姓名：“啤酒”}]
}
];
$scope.clicked=功能（状态、膳食）{
！！state？fine.checkCount++：fine.checkCount--；
}
}

此部分中当前有{mc.checkCount}}个选中的复选框！
{{m.name}}

如果选中第四个复选框，mc.selectedCBId在数组中会有3个或4个项目吗？@GaliloGalilo mc.selectedCBId将在单击复选框时持续添加项目。选中第一个复选框后，我单击第二个复选框，它没有被选中，mc.selectedCBId在数组中有2个项目。答案是有效的，但我使用检查表库的原因是因为mc中的

m。吃饭

是我嵌套的ng重复，它上面有父项。这将导致第二个mc.Founds的复选框不起任何作用@PaurianThanks@AbelChun感谢您的回复。我已经修改了这个示例，使它在mc.fines中包含嵌套的m。我不是在回避checkbox库，但是我认为它对于这个特定的需求来说是过分的。