2017-05-18 6 views
0

だが、私はこの質問オブジェクトがあるとしましょう:Angularjsチェックボックスグループの検証(ダイナミックオプション)

$scope.question = { 
    id: 1, 
    question: 'q?', 
    required: true, 
    control: { 
     type: 'multiple_check', 
     options: [{ 
      value: '1st option' 
     }, ... ] 
    } 
} 

そして、このフォーム:

<form name="s.form" novalidate> 
    <h1>{{ question.question }}</h1> 
    <label ng-repeat="option in question.control.options"> 
     <input type=" name="xxx" 
      ng-model="question.answer[$index]" ng-required="question.required" /> 
     {{ option.value }} 
    </label> 
</form> 

そして、私が検証して今こだわっています。

これはcreated a penです。フォームが有効なとき

{{s.form。有効な$}}は私が本当与える必要があり、グループ内のすべてのチェックボックスが

{{s.form [ 'XXXをチェックされた場合にのみtrueを返します']。$ valid}}は、少なくとも1つのチェックボックスがチェックされている場合はtrueを返すが、実際には最後のチェックボックスがチェックされているときにのみtrueを返す。

少なくとも1つのチェックボックスより多くの)グループから。少なくとも1つがチェックされると、フォームとグループが有効になります。

どうすれば実現できますか?すでに多くのことを試みましたが、これを機能させることはできません。

ありがとうございました。

答えて

0

あなたは

$scope.$watch("question.control.options" , function(n,o){ 
    var trues = $filter("filter")(n , {value:true}); 
    $scope.flag = trues.length; 
}, true); 

お知らせ怒鳴るようチェックボックスを見て独自の検証を行うことができます。チェックボックスの値がそう

$scope.question = { 
    id: 1, 
    question: 'q?', 
    required: true, 
    control: { 
     type: 'multiple_check', 
     options: [{ 
      value: false, 
      label: '1st option' 
     }, ... ] 
    } 
} 

と、あなたのビューとしてあなたの質問の値を変更するブール値でなければなりませんここ

<form name="s.form" novalidate> 
    <h1>{{ question.question }}</h1> 
    <label ng-repeat="option in question.control.options"> 
     <input type=" name="xxx" 
     ng-model="question.control.options.value" ng-required="question.required" /> 
     {{ option.label }} 
    </label> 
</form> 

fiddleメイクこのアプローチです

+0

同じ問題を抱えて、何が本当に変わっていません。 http://jsfiddle.net/JBwmA/368/ –

0

これは実際には難しいことでしたが、今はうまくいくと思います。 Here's working demo

私のアプリにthis moduleが含まれていることを知りたい人のために。その後

はにHTMLコードを変更:まだ

<form name="s.form" novalidate> 

    form valid? <b>{{ s.form.$valid | json }}</b> 

    <div ng-repeat="question in questions"> 
     <h1>{{ question.question }}</h1> 
     <label ng-repeat="option in question.control.options"> 
      <input type="checkbox" name="xxx_{{ question.id }}" 
      checklist-model="question.answer" checklist-value="option" ng-required="question.required && !question.answer.length" /> 
      {{ option.value }} 
     </label> 

     <p>question valid? {{ s.form['xxx_'+question.id].$valid | json }}</p> 
     answer: {{ question.answer }} 
    </div> 

</form> 
関連する問題