複選框驗證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可能會有所幫助。