표 형식의 확인란 렌더링에 대한 사용자 지정 유효성 검사 구현

Question

행 (확인란)으로 확인란을 표시해야한다는 요구 사항이 있습니다. 단일 행에 표시하는 동안 일부 문제로 인해 Ionic에서 제공하는 기본 확인란 구현을 사용할 수 없습니다.

따라서 like this 구현을 생각해 냈습니다. 여기 Ionicons에서 체크 표시 아이콘을 사용하고 있는데, 플래그를 기반으로 true/false로 설정합니다.

여기까지 좋습니다. 그러나 유효성 확인의 경우 원하는대로 작동하지 않습니다. 확인란을 선택하지 않은 경우 양식 유효성 확인이 반환되고 유효한 양식은입니다.

다음은 샘플 HTML 코드 나는 위의 링크에서 codepen을 만든

<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> 

을 방법 - 당신의 코드를 업데이트해야 그리고 스크립트는 여기에 표시됩니다 : -

가

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을 볼 수 있습니다.