Checkbox Unchecking after AngularJS sorting

Question

I currently have a table listing jobs. Each job has a checkbox.

<form name="jobsSampleSelectForm" id="jobs-sample-select-form">
    <div  jobs="data">
      <div ng-form="jobsSampleSelectForm">
        <table ng-table="tableParams" class="table" show-filter="true">
            <tr ng-repeat="job in $data" class="table-highlight" ng-class="{deactivated: job.is_active == 'No'}">
                <td data-title="'Sample'"><input type="checkbox" ng-model="job.selected"></td>
                <td data-title="'QC ID'" sortable="'id'"><a href="#/jobs/{{job.id}}">{{job.id}}</a></td>
                <td data-title="'Date Submitted'" sortable="'dateJob'">{{job.dateJob}}</td>
            </tr>
        </table>
      </div></div>
    <button type="submit" class="btn btn-primary-red" ng-click="sampleJobs()" ng-disabled="(jobs | filter: job.selected != true).length <= 0">Sample Jobs</button>
</form>

This allows the user to select the jobs they want. However, when the user sorts a column the checkbox will uncheck itself. This seems to be a common issue, so from the advice from this SO question I added a selected attribute to each job in my controller.

jobsService.getJobsByStatuses(["pre_sampling", "sampling", "setup"])
    .success(function(data){
        data.forEach(function(job){ job.selected = false; });
        $scope.jobs = data;
        var filteredData = params.filter() ? $filter('filter')(data, params.filter()) : data;
        var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : data;

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        params.total(orderedData.length);
})

This did not seem to cause a difference. What am I missing?

I created a Fiddle to show the basic idea. When the user selects checkboxes, then sorts, the checkboxes become unchecked.

Thanks, Sara. The fiddle helped to solve the problem. Happy coding! — Nobal Mohan
– Nobal Mohan, Commented Aug 21, 2017 at 18:07

Gangadhar Jannu · Accepted Answer · 2017-08-21 18:11:27Z

1

just change
<td data-title="'Sample'"><input type="checkbox" ng-model="job.selected"></td>
to
<td data-title="'Sample'"><input type="checkbox" ng-model="user.selected"></td>

If you want to persist the row selection then you should bind the checkbox to user.selected instead of binding to job.selected.

If you use user.selected for ng-model each row will have its own user object with selected property binded to checkbox so that you will get the selection even after the sorting

see the updated fiddle

edited Aug 21, 2017 at 18:11

answered Aug 21, 2017 at 18:01

Gangadhar Jannu

4,4626 gold badges33 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sara Fuerst Over a year ago

Sorry, I kind of merged my code with an existing fiddle, so in my code, as you can see in the snippet, I already have ng-model="job.selected". Let me see if I can update the Fiddle

Gangadhar Jannu Over a year ago

no change ng-model="job.selected" to ng-model="user.selected"

Sara Fuerst Over a year ago

My actual code is in the code snippet above. I do not user user, I use job

Sara Fuerst Over a year ago

I understand that. But if you look in my code in the question (not in the Fiddle) I never use user. user would be undefined

Nobal Mohan · Accepted Answer · 2017-08-21 18:02:29Z

0

<input type="checkbox" ng-model="user.selected">

Working fiddle http://jsfiddle.net/PQvQ2/83/

You are not capturing the checkbox value anywhere. In the user object, you already have "selected" to capture the selection. Using the same will store the selection. If you are using a different object "job", you will capture the index of selection but it will not be mapped to the correct value. Since, "job" object only store the checkbox selected, nothing more.

answered Aug 21, 2017 at 18:02

Nobal Mohan

4867 silver badges21 bronze badges

1 Comment

Sara Fuerst Over a year ago

Sorry, I kind of merged my code with an existing fiddle, so in my code, as you can see in the snippet, I already have ng-model="job.selected". Let me see if I can update the Fiddle

Sara Fuerst · Accepted Answer · 2017-08-21 20:46:01Z

0

The issue was that I was calling getData every time a filter was applied. This was setting my selected attribute on each job to false. To fix this issue, I moved my code to get the data outside of the getData function.

answered Aug 21, 2017 at 20:46

Sara Fuerst

6,1389 gold badges49 silver badges95 bronze badges

Collectives™ on Stack Overflow

Checkbox Unchecking after AngularJS sorting

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related