mardi 7 juillet 2015

Using checkboxes with ng-repeat and ng-model

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