Javascript 用于以表格式呈现复选框的自定义验证实现

我有一个要求，我必须在一行中显示复选框（以表格方式显示）。由于在单行中显示时出现一些问题，我无法使用Ionic提供的默认复选框实现

因此，我提出了一个实现方案。在这里，我使用Ionicons中的复选标记图标，基于我将其设置为true/false的标志

在这里一切都好。但是当涉及到验证时并没有按预期工作。如果未选中任何复选框，则表单验证将返回“表单为有效的”

下面是示例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>

{{ao.Text}

---

我已经在上面的链接中创建了一个代码笔。请告诉我哪里出了问题，或者是否有更好的方法以表格的方式实现复选框组（显示在一行中）。

您需要以这种方式更新代码-

<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);
        }
    };
}