テーブル形式のチェックボックスレンダリングのカスタム検証実装

Question

チェックボックスを横に並べて表示する必要があります（表形式の表示方法）。 Ionicが提供するデフォルトのチェックボックス実装を使用することができませんでした。

したがって、私は実装like thisを思いついた。ここでは、Ioniconsのチェックマークアイコンを使用しています。これは、true/falseに設定したフラグに基づいています。

ここまではすべていいです。しかし、それがバリデーションになると、それは望ましくない。チェックボックスが選択されていない場合はフォームの検証が返され、有効なフォームはとなります。以下は

私は上記のリンクでcodepenを作成したサンプルのHTMLコード

<form name="form" id="form" novalidate> 
    <div class="row"> 

<div ng-repeat="ao in counter" 
    ng-class="{ 'has-errors-left' : form.cb_{{ao.id}}.$invalid && {{isRequired}} == true && $first, 
       'has-errors-right' : form.cb_{{ao.id}}.$invalid && {{isRequired}} == true && $last, 
       'no-errors-left' : form.cb_{{ao.id}}.$valid && {{isRequired}} == true && $first, 
       'no-errors-right' : form.cb_{{ao.id}}.$valid && {{isRequired}} == true && $last }" 
    id="border"          
    class="col col-33 item item-divider removeDividerColor parentDiv"> 
     <a class="button button-icon icon answerOption_{{ao.id}} answerOptionCB childDiv" 
      ng-class="{ 'ion-ios-checkmark-outline': checkStatus === false, 'ion-ios-checkmark': checkStatus === true }" 
      id="cb_{{ao.id}}" 
      name="cb_{{ao.id}}" on-tap="checkStatus = !checkStatus" 
      ng-required="!getRequired(isRequired, ao.id)" 
      ng-init="checkStatus = false" 
      ng-model="checkStatus">{{ao.Text}} 
     </a>    
    </div> 
    </div> 
</form> 

です。親切に私がどこに間違っているのかを教えてください。また、チェックボックスのグループを表形式で実装する良い方法があります（単一の行に表示されています）。あなたはこの中で、あなたのコードを更新する必要があり

Answer 1

は

<div ng-controller="myCtrl"> 
    <ng-form name="myForm"> 
    <span 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> 
    </span> 
    <input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" /> 
    </ng-form> 
</div> 

をway-、スクリプトはここに行く： -

function myCtrl($scope) { 

    $scope.choices = [{"id":1, "value":"1", "label":"Good"}, {"id":2, "value":"2","label":"Ok"},{"id":3, "value":"3","label":"Bad"}]; 
    $scope.value = []; 
    $scope.updateQuestionValue = function(choice){ 
     $scope.value = $scope.value || []; 
     if(choice.checked){ 
      $scope.value.push(choice.value); 
      $scope.value = _.uniq($scope.value); 
     }else{ 
      $scope.value = _.without($scope.value, choice.value); 
     } 
    }; 
} 

あなたがここにDEMOを見ることができます。