AngularJs processing multiple checkbox

Question

I have a page on my app which lists a series of questionnaires. Underneath each questionnaire there's a consent form whereby user can select who can view that specific questionnaire.

I'm not quite sure how to tackle processing multiple checkboxes for each individual form independently. I've put my sample code on plunker for everyone to view.

app = angular.module('app', [])

.controller('QuestionnaireController', function($scope){

  $scope.questionnaires = [
        {id : 1, name : "Questionnaire One"},
        {id : 2, name : "Questionnaire Three"},
        {id : 2, name : "Questionnaire Four"},
    ];

    $scope.relationships = [
        {id : 1, name : "Joe Bloggs", role : "Parent"},
        {id : 2, name : "John Doe", role : "Teacher"},
        {id : 3, name : "Jane Doe", role : "Friend"}
    ];


    $scope.submitConsent = function(){
      //process form...
    }

});

http://plnkr.co/edit/b5rr8CC9xhcaLC6MNNig?p=info

Any help would be much appreciated :)

Answer 1

If you want to submit your form to server. You should give a name to your inputs of type checkbox. Use "ids" for example. And you add a value attribute to the checkbox with id of the relation.

            <form class="form-group" ng-submit="submitConsent()">
                <label for="" ng-repeat="relation in relationships">
                    <input type="checkbox" name="ids" value="{{relation.id}}"/>
                    {{relation.name}} ({{ relation.role }})<br/>
                </label>

                <input type="submit" name="Submit Questionnaire" />
            </form>

On the server side, you will get an array of ids and process this array depending on what server tech you choose.

If you want to get the ids in angular app. Do the following.

<form class="form-group" ng-submit="submitConsent()">
            <label for="" ng-repeat="relation in relationships">
                <input type="checkbox" value="{{relation.id}}" ng-click="relationSelected(relation.id)"/>
                {{relation.name}} ({{ relation.role }})<br/>
            </label>
            <div>{{ids}}</div>
            <input type="submit" name="Submit Questionnaire" />
        </form>

In javascript,

$scope.ids = [];
$scope.relationSelected = function(id) {
    $scope.ids.push(id);
}