复选框标签不能正确地与 Angular 一起使用答案

【问题标题】：Checkbox tag properly not working with Angular复选框标签不能正确地与 Angular 一起使用
【发布时间】：2016-04-15 03:00:51
【问题描述】：

我有一个如下的 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>

我认为这应该可以工作，但不能正常工作。可能是什么问题？

【问题讨论】：

你用的是字段，但它是字段吗？
错过了一些我需要放的片段。
输入复选框中的 ng-options 是否正确。？ <input type="checkbox" name="{{field.id}}" value="{{field.id}}" ng-options="value as value.title for value in field.values">
这是我相信的，但我不完全确定。

标签： javascript angularjs json checkbox

【解决方案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 用法不正确，如果我对您的代码进行此更改，我可以看到输出。

【讨论】：