Paul Konstanski
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:
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.
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.I D}}" 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
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);
};
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>
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.I
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.