Question

我正在构建一个包含许多不同类型问题的表单的Web应用程序。现在，我遇到了复选框类型的问题。

以下是观点：

            <div class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'checkbox'">
                <label for="{{field.id}}">{{field.title}}</label>
                <br>
                <label ng-repeat="value in field.values"><input type="checkbox" id="{{field.id}}" name="field.id" ng-model="formData[field.id]"> {{value.title}}</label>
                <p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p>

                <div ng-show="form.$submitted" ng-cloack>
                    <span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span>
                </div>
            </div>

这是一个JSON I＆＃39;渲染：

{
                        "id": "4_6_yes_no_question",
                        "title": "6. Do you qualify for this?",
                        "type": "checkbox",
                        "info": "If yes, check yes",
                        "size": {
                            "width": 100,
                            "height": 1
                        },
                        "validations": {
                            "required": true
                        },
                        "values": [
                            {
                                "id": 0,
                                "title": "Not Selected"
                            },
                            {
                                "id": 1,
                                "title": "Yes"
                            },
                            {
                                "id": 2,
                                "title": "No"
                            }
                        ]
                    }

当我的视图显示时，它显示3个具有不同标题的复选框（未选中，是，否）。问题是当用户选择其中一个框时，它会选择全部。保存到localStorage的数据只是真或假。是否可以将其保存为JSON中的图块？

Answer 1

首先，这是一个是或否的问题。你不能同时选择两者。所以你需要把它做成单选按钮。

现在，您可以向value="{{field.id}}"元素添加input，以便您可以选择ng-model中存储的值。然后使用ng-model在表单该部分的父元素处启动ng-init="formData[field.id]=0"。默认情况下，它会使Not selected选项变为ckecked。

演示：

angular.module('theApp', []).controller('theCtrl', function($scope) {
  $scope.field = {
    "id": "4_6_yes_no_question",
    "title": "6. Do you qualify for this?",
    "type": "radio",
    "info": "If yes, check yes",
    "size": {
      "width": 100,
      "height": 1
    },
    "validations": {
      "required": true
    },
    "values": [{
      "id": 0,
      "title": "Not Selected"
    }, {
      "id": 1,
      "title": "Yes"
    }, {
      "id": 2,
      "title": "No"
    }]
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="theApp" ng-controller="theCtrl">
  <div ng-init="formData[field.id]=0" class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'radio'">
    <label for="{{field.id}}">{{field.title}}</label>
    <br>
    <label ng-repeat="value in field.values">
      <input type="radio" id="{{field.id}}" name="field.id" ng-model="formData[field.id]" value="{{value.id}}">{{value.title}}</label>
    <p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p>

    <div ng-show="form.$submitted" ng-cloack>
      <span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span>
    </div>
    
    Selected Value is : {{formData[field.id]}}
  </div>
</div>

复选框标记在Anuglar jS

1 个答案: