2014-11-17 2 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

Я попробовал этот подход, и обнаружил, что это требуется мне не выбрать ни один или все флажки. В случае, если ни один не установлен, ng-required является ложным для всех из них, что делает проверку успешной. Если проверяется только первое, все флажки становятся обязательными, что приводит к сбою проверки. Если все отмечено, все требуется, и проверка завершается успешно. – 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 скрипку: http://jsfiddle.net/fodyyskr/

+0

Это неправильное использование ng-required. Ваш пример может быть реализован без необходимости использования ng: http://jsfiddle.net/yzjugv90/ – britter

Смежные вопросы