停止点击复选框列表

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

控制器

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

问题

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

来源

2017-06-01 Abel Chun

如果您选择第四个复选框，将mc.selectedCBId有数组中的3个或4个项目？ –

@GaliloGalilo mc.selectedCBId将在您点击复选框时继续添加项目。 –

从一个纯粹的角度的观点 - 不依赖于checkboxlist，你可以尝试这样的事情：

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

var myApp = angular.module('myApp', []); 
 

 
//myApp.directive('myDirective', function() {}); 
 
//myApp.factory('myService', function() {}); 
 

 
function MyCtrl($scope) { 
 
    $scope.mealC = [ 
 
    { 
 
     checkCount: 0, 
 
     meals: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }, { id: 3, name: "baz" }] 
 
    }, { 
 
     checkCount: 0, 
 
     meals: [{ id: 11, name: "gravy" }, { id: 12, name: "cake" }, { id: 13, name: "beer" }] 
 
    } 
 
    ]; 
 
    
 
    $scope.clicked = function(state, meal) { 
 
    !!state ? meal.checkCount++ : meal.checkCount--; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
<div ng-controller="MyCtrl"> 
 
    <div ng-repeat="mc in mealC"> 
 
    <p> 
 
     There are currently {{mc.checkCount}} selected checkboxes in this section! 
 
     <div ng-repeat="m in mc.meals"> 
 
     <input type="checkbox" id="{{ m.id }}" name="{{ m.name }}" ng-model="m.checked" ng-value="m.name" ng-change="clicked(m.checked, mc)" ng-disabled="mc.checkCount >= 2 && !m.checked" /> 
 
     <label for="{{ m.name }}"><span class="checkbox primary primary"><span></span></span>{{ m.name }}</label> 
 
     </div> 
 
    </p> 
 
    </div> 
 
</div> 
 
</body>

来源

2017-06-01 03:00:48 Paurian

答案正在工作，但我使用清单库的原因是因为'm in mc.meals'是我嵌套的ng-repeat，它的父级位于顶部。这会导致第二个mc.meals的复选框不执行任何操作。 @Paurian –

感谢@AbelChun的回复。我修改了这个例子，所以它包含mc.meals中的嵌套m。我不回避复选框库，但认为这对于这个特定的需求是过分的。 – Paurian

绑定输入到比你的阵列，例如一个可变其他：another_variable 在HTML：清单模型= “another_variable”

并在代码：

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

来源

2017-06-01 02:35:33

当第一个复选框被选中时，我点击第二个复选框，它没有被选中，mc.selectedCBId在数组中有两个项目。 –

我编辑了我的答案，检查它并回复请问 –

停止点击复选框列表

回答

相关问题