Checkbox tag properly not working with Angular

Question

I have a json file like following:

{
    "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
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

I'm trying to use this format of JSON file to iterate different types of questions and show them properly. I have configured every others but checkbox questions. Here is the code for checkbox I have:

        <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>

I think this should work but it does not work properly. What could be the problem?

is ng-options in input checkbox is correct.? <input type="checkbox" name="{{field.id}}" value="{{field.id}}" ng-options="value as value.title for value in field.values"> — sreeramu
– sreeramu, Commented Apr 15, 2016 at 3:18

sreeramu · Accepted Answer · 2016-04-15 03:44:53Z

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>

i think your ng-option usage is not correct, if i do this changes to your code, i am able to see the output.

answered Apr 15, 2016 at 3:44

sreeramu

1,22312 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Checkbox tag properly not working with Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related