Question

我目前有一个列出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>

这允许用户选择他们想要的作业。但是，当用户对列进行排序时，该复选框将取消选中。这似乎是一个常见问题，因此根据SO question的建议，我在控制器中为每个作业添加了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来展示基本想法。当用户选择复选框，然后排序时，复选框将变为未选中状态。

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

工作小提琴http://jsfiddle.net/PQvQ2/83/

您没有在任何地方捕获复选框值。在用户对象中，您已经“选择”以捕获选择。使用相同的将存储选择。如果使用其他对象“作业”，则将捕获选择索引，但不会将其映射到正确的值。因为，“job”对象只存储所选的复选框，仅此而已。

Answer 3

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

AngularJS排序后复选框取消选中

3 个答案: