复选框验证angularjs

Question

我有一个问题的多个复选框.Atleast一个复选框需要被选中。如果没有一个复选框得到选择的形式应该通过验证error.Did我想念任何东西。关于我如何能够实现这种行为的任何想法？ 我.JS代码：下面

$scope.onCheckBoxSelected=function(){ 

          var flag=false; 
          for(var key in selectedOptions){ 
           console.log('Key -' +key +' val- '+selectedOptions[key]); 
           if(selectedOptions[key]){ 
            flag=true; 
           } 
          } 
          if(!flag){ 
           selectedOptions=undefined; 
          } 
         }; 

是我的html代码：

<div class="grid"> 
    <div class="col flex-10 mandatoryField" ng-class="{error: (!selectedOptions && formMissingFields)}">Hello please select atleast one</div> 
    <div class="col flex-2"> 
    </div> 
    <div class="col flex-5"> 

     <div style="padding-top: 2px"> 
      <input type="checkbox" name="apple" title="Select type" value="apple" ng-model="apple" ng-change="onCheckBoxSelected()">apple 
      </input> 
     </div> 
     <div style="padding-top: 2px"> 
      <input type="checkbox" name="orange" title="Select type" value="orange" ng-model="orange" ng-change="onCheckBoxSelected()">orange 
      </input> 
     </div> 
     <div style="padding-top: 2px"> 
      <input type="checkbox" name="banana" title="Select type" value="banana" ng-model="banana" ng-change="onCheckBoxSelected()">banana 
      </input> 
     </div> 

    </div> 

</div>     

Answer 1

你可以把它简单，而不需要ngChange事件。

<div ng-class="{error: !apple && !orange && !banana">Hello please select atleast one</div> 

Answer 2

这是使用AngularJS表单进行复选框验证的最佳实践 - 它也可以帮助您，如果您打算扩展您的表单。你将不得不重构你的代码来使用这个功能。

<ng-form name="myForm"> 
    <span style="color:red;" ng-show="myForm.$invalid">Please select one</span> 
    <br /> 
    <!-- your checkbox values will be in "choices" --> 
    <p ng-repeat="choice in choices"> 
     <label class="checkbox" for="{{choice.id}}"> 
     <input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" ng-required="value.length==0" /> {{choice.label}} 
     </label> 
    </p> 
    <input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" /> 
    </ng-form> 

看到这个fiddle - 请注意，它使用underscore.js。另外，this question可能会有所帮助。