Link to home
Start Free TrialLog in
Avatar of Paul Konstanski
Paul KonstanskiFlag for United States of America

asked on

Proper format for ng-repeat Checkboxes?

I want to create a form that collects a persons email address and then a dynamic list of check boxes. (The dynamic part will come from a DB query, but for purposes of this question, I am providing a sample scope array.

What I need help with is how to set up the ng-repeat to allow for that dynamic list to be made available as a set of post vals upon submit.  The following is a modified piece of the code for demo purposes.

Here is the key portion of my Angular Code:

$scope.seminars = [
    { id: 1, name: 'Seminar One' },
    { id: 2, name: 'Seminar Two' },
    { id: 3, name: 'Seminar Three' },
    { id: 4, name: 'Seminar Four' }
  ];

$scope.submitFm = function (data) {
	console.log("Arrival at submit for checkboxes");
	console.log(data);
};	

Open in new window


And here is the HTML Code. I am creating a form that the attendee fills out to select which seminars they want to attend.  The first field of the form is email. The second field is a check field that I've created.  The third is my attempt at an ng-repeat to get the list of selected seminars.

<form id="attnFm" name="attnFm" class="form" ng-if="!msg">
       <input type="hidden" ng-model="attn.post_actions" ng-init="attn.post_actions='matm_attend'"/>
       <div class="row">
		 <label class="sr-only" for="email">email</label>
		 <input type="email" class="form-control" id="email"
                                         placeholder=" Email" 
                                         ng-model="attn.email"/>
       </div>
						
	<div class="row">
		<label class="sr-only" for="checky">checky</label>Check Box
		<input type="checkbox" class="form-control" id="checky"
                                         ng-model="attn.checky"/>
         </div>
	<div class="row">
            <div ng-repeat="seminar in seminars"> 
		<label class="sr-only" for="seminar.name">seminar.name</label>
		<input type="checkbox" class="form-control" id="seminar.id" ng-model="seminar.id"/>
          </div>
         <div class="row">
                                	<button type="submit" id="frmsbmt" class="btn btn-primary btn-xl"
                                           ng-disabled="attnFm.$invalid" ng-click="submitFm(attn)">
                                                  View <i class="fa fa-send"></i>
                                    </button>
          </div>
 </form>

Open in new window


The main problem I am having is what to use as the model for my ng-repeat seminar field. If I try ng-model="attn.{{seminar.ID}}" I get an error. When I set it to ng-model="attn.seminar.ID" then all three of the ng-repeat fields are linked and when I click one, all show.  

So what do I set the ng-model= field to get it to work?

When I hit submit and view the console with the developer tools.  Here is what shows on the developer console view:

checky: true
email: "myemail@aol.com"
​post_actions: "matm_attend"
​seminarID: true

So how do I get the checkboxes of ng-repeat to properly show up in my console view log?

NOTE: in order to demonstrate this
ASKER CERTIFIED SOLUTION
Avatar of Paul Konstanski
Paul Konstanski
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial