Question

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

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

直到这里一切都好。但是当涉及验证时，它无法正常工作。如果未选中任何复选框，则表单验证将返回，表单为有效。

以下是示例HTML代码

   compile 'com.google.android.gms:play-services-vision:10.0.0+'

     TextRecognizer textRecognizer = new TextRecognizer.Builder(getApplicationContext()).build();

    Frame imageFrame = new Frame.Builder()

            .setBitmap(bitmap)                 // your image bitmap
            .build();

    String imageText = "";


    SparseArray<TextBlock> textBlocks = textRecognizer.detect(imageFrame);

    for (int i = 0; i < textBlocks.size(); i++) {
        TextBlock textBlock = textBlocks.get(textBlocks.keyAt(i));
        imageText = textBlock.getValue();                   // return string
    }

我在上面的链接中创建了一个codepen。请告诉我出错的地方，或者有更好的方法以表格方式实现复选框组（显示在一行中）。

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。

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

1 个答案: