I'm trying to build a form with a series of checkboxes that represent a polymorphic association between two models in my database. I have JobDescription and ExperienceLevel. The form is to update a JobDescription and has a checkbox for each ExperienceLevel. When the form opens in a modal, I want to have the current experience levels checked that are associated with the job.
I've been struggling to figure out how to implement the checkboxes using ng-repeat and ng-model. My current code renders the checkboxes, but the correct ones are not pre-selected. Additionally, clicking on a box checks all of them at once.
Here is my editJob method in my controller:
$scope.editJob = function(r) {
$scope.id = r.id;
$scope.title = r.title;
$scope.jobFunction = r.role;
$scope.description = r.description;
$scope.postingLink = r.posting_link;
$scope.experienceLevels = r.experience_levels.map(function(r, i){
return { i: r.name };
});
$scope.company = r.company_name;
var modalInstance = $modal.open({
templateUrl: '/assets/admin/editjob.html',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
jobForm: function () {
return $scope.jobForm;
}
}
});
};
Here is the JSON output for a sample job:
{
id: 23,
title: "Ruby Ninja",
role: "Customer Support",
experience_levels: [
{
id: 2,
name: "Entry Level",
rank: 0,
created_at: "2015-05-20T16:28:38.195Z",
updated_at: "2015-05-20T16:28:38.195Z"
}
],
description: "Awesomesauce!",
posting_link: "http://www.google.com/",
company_id: 3,
company_name: "Ice 2 Go",
created_at: "12:02 AM, Jun 13, 2015",
updated_at: "10:50 PM, Jul 06, 2015"
}
Here is what $scope.job looks like when the form is loaded:
{
company: "Ice 2 Go",
description: "Awesomesauce!",
experienceLevels: [
{ i: "Entry Level" }
],
id: 23,
jobFunction: "Customer Support",
postingLink: "http://www.google.com/",
title: "Ruby Ninja",
__proto__: Object
}
Here is the part of my form with the checkboxes:
<div class="form-group">
<label>Experience Level</label>
<div ng-repeat="experienceLevel in expItems">
<input type="checkbox" name="experienceLevel.display" ng-model="job.experienceLevels['experienceLevels']" ng-true-value="experienceLevel">
{{experienceLevel.display}}
</div>
</div>
Here is what I'm currently sending to the server:
{
"id"=>"23",
"title"=>"Ruby Ninja",
"jobFunction"=>"Customer Support",
"description"=>"Awesomesauce!",
"postingLink"=>"http://www.google.com/",
"experienceLevels"=>[{"i"=>"Entry Level"}],
"company"=>"Ice 2 Go",
"action"=>"update",
"controller"=>"admin/job_descriptions",
"job_description"=>{"id"=>23, "title"=>"Ruby Ninja", "description"=>"Awesomesauce!"}
}
Here is what I want to be sending to the server when the form is saved:
{
company: "Ice 2 Go",
description: "Awesomesauce!",
experienceLevels: [
{
0: "Internship",
2: "Mid Level"
}
],
id: 23,
jobFunction: "Customer Support",
postingLink: "http://www.google.com/",
title: "Ruby Ninja"
}
How can I accomplish this?
Aucun commentaire:
Enregistrer un commentaire