select至less一个checkboxvalidation

我有我想从中select至less一个checkbox,并希望显示validation错误checkbox的数组

我怎样才能做到这一点? 这是我的代码

<div class="form-group" ng-class="{ 'has-error' : submitted && form.field.$invalid }"> <div class="col-md-12"><label for="field" >Select at leat one</label></div> <div class="col-md-2" data-ng-repeat="i in [1,2,3,4]"> <label><input type="checkbox" name="field[$index]" value="{{i}}" data-ng-model="form.field[$index]" required/>Choice {{i+1}}</label> </div> <div ng-show="submitted && form.field.$invalid" class="help-block"> <p ng-show="form.field.$error.required">Please select at least one choice<p> </div> </div> </div> 

您可以使用原生JavaScript函数遍历数组。 首先想到的是Array.prototype.some()和Array.prototype.filter() 。

有些时候 ,可以确定数组中的一个项目是否validation为真,并且使用筛选器可以find所有传递自定义expression式的元素,并检查新创build的数组是否具有一定的长度。

例如:

 var atleastOne = this.form.field.some(function(element) { return element; }); if(atleastOne) { window.alert("validated with some"); } var filtered = this.form.field.filter(function(element) { if(element) { return element; } }); if(filtered.length > 0) { window.alert('validated with filter'); } 

您可以根据validation结果标记显示错误的variables。 一个工作演示可以在这里find。

你可以创build你的checkbox列表对象数组,然后绑定它。 请find演示

 <div ng-controller="ChckbxsCtrl"> <div ng-repeat="chk in items"> <div style="width:500px;height:100px;border:1px solid #000;"> <B>{{chk.group}}</B><br> <label ng-repeat="vale in chk.values"> <input type="checkbox" ng-model="vale.val" /> {{vale.label}}</label> </div> <span ng-show="chk.isValid">Select at least one option from {{chk.group}}</span> </br> </div> </br>