复选框标记正确无法使用Angular

时间:2016-04-15 03:00:52

标签: javascript angularjs json checkbox

我有一个类似以下的json文件:

{
    "groups": [
        {
            "id": "4_2_valid",
            "title": "Valid",
            "sections": [
                {
                    "id": "4_2_section",
                    "fields": [
                                                {
                            "id": "3_1_entertainment_group_0",
                            "title": "Sample title",
                            "info": "Always wrtie \"NA\" ",
                            "type": "text",
                            "size": {
                                "width": 100,
                                "height": 1
                            },
                            "validations": {
                                "required": true,
                                "min_length": 1
                            }
                        },
                        {
                            "id": "4_2_yes_no_questions",
                                                        "title": "Select title",
                            "type": "checkbox",
                            "info": "Always select \"Yes\"",
                            "size": {
                                "width": 100,
                                "height": 1
                            },
                            "validations": {
                                "required": true
                            },
                            "values": [
                                {
                                    "id": 0,
                                    "title": "Not Selected"
                                },
                                {
                                    "id": 1,
                                    "title": "Yes"
                                },
                                {
                                    "id": 2,
                                    "title": "No"
                                }
                            ]
                        },
                                                {
                            "id": "4_2_yes_no_questions",
                                                        "title": "Question title",
                            "type": "date",
                            "info": "Write the suitable data",
                            "size": {
                                "width": 100,
                                "height": 1
                            },
                            "validations": {
                                "required": true
                            }
                        },
                                                {
                            "id": "3_1_entertainment_group_0",
                            "title": "Number Title",
                            "info": "Number Instruction",
                            "type": "number",
                            "size": {
                                "width": 100,
                                "height": 1
                            },
                            "validations": {
                                "required": true,
                                "min_length": 1
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

我尝试使用这种格式的JSON文件来迭代不同类型的问题并正确显示它们。除了复选框问题,我已经配置了其他每个这是我有的复选框的代码:

        <div class="" ng-repeat="group in groups">
            <div class="" ng-repeat="section in group.sections">
                <div class="" ng-repeat="field in section.fields">
                <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>
                    <input type="checkbox" name="{{field.id}}" value="{{field.id}}" ng-options="value as value.title for value in field.values">
                    <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>
</div>
</div>
</div>

我认为这应该有效,但它无法正常工作。可能是什么问题?

1 个答案:

答案 0 :(得分:1)

<!--<input type="checkbox" name="{{field.id}}" value="{{field.id}}" ng-options="value as value.title for value in field.values">-->

<label ng-repeat="value in field.values"><input type="checkbox" name="{{value.id}}" value="{{value.id}}"> {{value.title}}</label>

我认为您的ng-option使用不正确,如果我对您的代码进行了更改,我就能看到输出。