角度复选框排序
一直在寻找我的独特案件涉及按选定的复选框排序,但到目前为止,我已经空了。我目前有一个工作示例(请参阅https://plnkr.co/edit/MtlkshHSoVMw7R1knOzt?p=preview),但不幸的是,这些要求是双向绑定不可接受的。相反,要求是我必须选择标题,然后通过选中的复选框启动排序。角度复选框排序
这里是控制器。
var myApp = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var employees = [
{ id: "1", firstName: "Ed", dateOfBirth: new Date("April, 20, 1973"), gender: "Male", salary: 60000, checked: false },
{ id: "2", firstName: "Martha", dateOfBirth: new Date("April, 20, 1975"), gender: "Female", salary: 70000, checked: false },
{ id: "3", firstName: "Thuy", dateOfBirth: new Date("April, 20, 1977"), gender: "Female", salary: 50000, checked: false },
{ id: "4", firstName: "Frank", dateOfBirth: new Date("April, 20, 1979"), gender: "Male", salary: 90000, checked: false },
{ id: "5", firstName: "Zhenya", dateOfBirth: new Date("April, 20, 1981"), gender: "Female", salary: 100000, checked: false },
];
$scope.employees = employees;
$scope.reverseSort = false;
$scope.sortColumn = "firstName";
$scope.sortData = function (column) {
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
});
这里是HTML
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th ng-click="sortData('employee.checked')" ng-model="selectedCheckBox">CheckBoxTest</th>
<th ng-click="sortData('firstName')">Name</th>
<th ng-click="sortData('dateOfBirth')">Date of Birth</th>
<th ng-click="sortData('gender')">Gender</th>
<th ng-click="sortData('salary')">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | orderBy: ['-checked', 'sortColumn']: reverseSort">
<td><input type="checkbox" id="employee.firstName" ng-checked="false" ng-model="employee.checked" /></td>
<td>{{ employee.firstName }}</td>
<td>{{ employee.dateOfBirth | date: "dd/MM/yyyy" }}</td>
<td>{{ employee.gender }}</td>
<td>{{ employee.salary }}</td>
</tr>
</tbody>
</table>
</div>
</body>
正如你可以看到每列进行排序;然而,复选框正在被动态排序,这是不受欢迎的行为。提前致谢。
好的解决了你的问题。 问题在于您在复选框中使用了ng-model,并且它的值设置为employee.checked,这是您在单击名称标题时传递的数据。所以我只是删除它,并按预期工作。
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<style type="text/css">
table{
border-collapse: collapse;
}
td{
border: 1px solid black;
padding: 5px;
}
th {
padding: 5px;
text-align: left;
cursor: pointer;
border: 1px solid black;
}
</style>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th ng-click="sortData('employee.checked')" ng-model="selectedCheckBox">CheckBoxTest</th>
<th ng-click="sortData('firstName')">Name</th>
<th ng-click="sortData('dateOfBirth')">Date of Birth</th>
<th ng-click="sortData('gender')">Gender</th>
<th ng-click="sortData('salary')">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | orderBy: ['-checked', 'sortColumn']: reverseSort">
<td><input type="checkbox" id="employee.firstName" ng-checked="false" /></td>
<td>{{ employee.firstName }}</td>
<td>{{ employee.dateOfBirth | date: "dd/MM/yyyy" }}</td>
<td>{{ employee.gender }}</td>
<td>{{ employee.salary }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
将此作为您的html使用。
Upvote如果有帮助..谢谢 –
是的,我也试过,但我发现这是不适用于点击复选框的不同场景 - 他们只是没有正确排序。 – Eds
只需将“选中”属性添加到员工模型和排序使用:
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th ng-click="sortData('checked')">CheckBoxTest</th>
<th ng-click="sortData('firstName')">Name</th>
<th ng-click="sortData('dateOfBirth')">Date of Birth</th>
<th ng-click="sortData('gender')">Gender</th>
<th ng-click="sortData('salary')">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | orderBy:sortColumn: reverseSort">
<td><input type="checkbox" ng-model="employee.checked" ng-click="sortColumn = 'freeze'" /></td>
<td>{{ employee.firstName }}</td>
<td>{{ employee.dateOfBirth | date: "dd/MM/yyyy" }}</td>
<td>{{ employee.gender }}</td>
<td>{{ employee.salary }}</td>
</tr>
</tbody>
</table>
</div>
</body>
我能够通过注入排序依据筛选到控制器来解决这个问题。我更新了plunker代码以演示如何执行此操作。非常感谢您的回复。
https://plnkr.co/edit/MtlkshHSoVMw7R1knOzt?p=preview
angular.module('orderByExample3', [])
.controller('ExampleController', ['$scope', 'orderByFilter', function($scope, orderBy)
所以,你想究竟是什么? –
我需要它仅在单击标题时进行排序,而不在单击复选框时进行排序。如下所示:1.点击所需的复选框,然后2.转到标题然后进行排序。希望这是有道理的。 – Eds