samedi 16 avril 2016

Checkbox tag not working properly in Anuglar jS

I'm building a web app which has a form with many different types of questions. Now, I'm suffering with checkbox type of questions.

Here is the view:

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

Here is a JSON I'm rendering:

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

When my view is shown, it shows 3 checkboxes with different titles(not selected, yes, no). The problem is that when a user selects one of the boxes, it selects all. And the data being saved to localStorage is only true or false. Is it possible to save as the tile I have in JSON?




Aucun commentaire:

Enregistrer un commentaire