AngularJS 排序后复选框取消选中

Question

我目前有一个 table 列表 jobs。每个 job 都有一个复选框。

<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>

这允许用户select他们想要的工作。但是，当用户对列进行排序时，复选框将自行取消选中。这似乎是一个常见问题，因此根据此的建议，我向控制器中的每个作业添加了一个 selected 属性。

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);
})

这似乎没有什么不同。我错过了什么？

我创建了一个 Fiddle 来展示基本思想。当用户 select 选中复选框，然后进行排序时，复选框变为未选中状态。

Answer 1

只是改变
<td data-title="'Sample'"><input type="checkbox" ng-model="job.selected"></td>
至
<td data-title="'Sample'"><input type="checkbox" ng-model="user.selected"></td>

如果要保留行选择，则应将复选框绑定到 user.selected，而不是绑定到 job.selected。

如果你对 ng-model 使用 user.selected，每一行都有自己的 user 对象，selected 属性绑定到复选框，这样你就可以选择即使排序后

查看更新后的 fiddle

Answer 2

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

工作fiddlehttp://jsfiddle.net/PQvQ2/83/

您没有在任何地方捕获复选框值。在用户对象中，您已经有 "selected" 来捕获选择。使用相同的将存储选择。如果您使用不同的对象 "job"，您将捕获选择的索引，但它不会映射到正确的值。因为，"job" 对象仅存储选中的复选框，仅此而已。

Answer 3

问题是每次应用过滤器时我都在调用 getData。这是将每个作业的 selected 属性设置为 false。为了解决这个问题，我移动了我的代码以在 getData 函数之外获取数据。

AngularJS 排序后复选框取消选中

Checkbox Unchecking after AngularJS sorting

javascript

checkbox

angularjs

angularjs-ng-repeat