2014-11-17 3 views
5

하지만 중복되는 경우 놀랄 일이 아닙니다. 필요한 항목을 따라 간단하게 찾을 수 없습니다.Angular.js에 적어도 하나 이상의 확인란이 필요합니다

사용자는 적어도 하나 이상의 확인란을 선택해야하지만이 작업을 수행하는 방법에 대해 당황 스럽습니다.

<input type="checkbox" ng-model="myForm.first" /> First <br /> 
    <input type="checkbox" ng-model="myForm.second" />Second <br /> 
    <input type="checkbox" ng-model="myForm.third" /> Third 

답변

6
<input type="checkbox" ng-model="myForm.first" ng-required="myForm.first || myForm.second || myForm.third" /> First <br /> 
<input type="checkbox" ng-model="myForm.second" ng-required="myForm.first || myForm.second || myForm.third"/>Second <br /> 
<input type="checkbox" ng-model="myForm.third" ng-required="myForm.first || myForm.second || myForm.third"/> Third 
+0

http://jsfiddle.net/fodyyskr/ 확인란. 아무 것도 선택하지 않은 경우 ng-required는 모두 false이며 유효성 검사가 성공합니다. 첫 번째 만 선택하면 모든 확인 상자가 필요하므로 유효성 검사가 실패합니다. all이 선택되면 모두 필요하며 유효성 검사가 성공합니다. – Binnut

+0

'! (myForm.first || myForm.second || myForm.third)'를 사용하는 것은 괜찮은 것처럼 보입니다. – Binnut

+1

그리고 20 개의 체크 박스가 있다면? 이 솔루션은 단지 몇 가지가있는 경우에만 유용합니다. – Nat

0

HTML

<div ng-app="myApp" ng-controller="myCrtl as myForm"> 
    <input type="checkbox" ng-required="myForm.selectedOptions" ng-model="myForm.selectedOptions.first" ng-change="myForm.onCheckBoxSelected()" /> First <br /> 
    <input type="checkbox" ng-required="myForm.selectedOptions" ng-model="myForm.selectedOptions.second" ng-change="myForm.onCheckBoxSelected()"/>Second <br /> 
    <input type="checkbox" ng-required="myForm.selectedOptions" ng-model="myForm.selectedOptions.third" ng-change="myForm.onCheckBoxSelected()"/> Third<br/> 
    <span style="color:red;" ng-if="!myForm.selectedOptions ">Required</span> 
</div>  

JS

angular.module('myApp',[]) 
    .controller('myCrtl',function(){ 
     var myForm=this; 
     myForm.onCheckBoxSelected=function(){ 

     var flag=false; 
     for(var key in myForm.selectedOptions){ 

      if(myForm.selectedOptions[key]){ 
       flag=true; 
      } 
     } 
     if(!flag){ 
      myForm.selectedOptions = undefined; 
     } 
    }; 

}); 

JS 바이올린 : 나는이 방법을 시도하고이 없음을 선택 내게 필요한 것을 발견하거나 모든

+0

이것은 ng-required의 올바른 사용법이 아닙니다. 당신의 예제는 다음과 같이 ng-required없이 구현 될 수 있습니다 : http://jsfiddle.net/yzjugv90/ – britter

관련 문제