Angularjs 角度复选框排序
我一直在寻找我的独特案例，包括按选中的复选框排序，但到目前为止，我的结果是空的。我目前有一个工作示例（请参阅），但不幸的是，双向绑定是不可接受的。相反，要求是我必须选择标题，然后启动“按选定项排序”复选框 这是控制器Angularjs 角度复选框排序,angularjs,sorting,checkbox,Angularjs,Sorting,Checkbox,我一直在寻找我的独特案例，包括按选中的复选框排序，但到目前为止，我的结果是空的。我目前有一个工作示例（请参阅），但不幸的是，双向绑定是不可接受的。相反，要求是我必须选择标题，然后启动“按选定项排序”复选框 这是控制器 var myApp = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { id: "1",
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;
}
});
<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>
复选框测试
名称
出生日期
性别
薪水
{{employee.firstName}
{{employee.dateOfBirth}日期：“dd/MM/yyyy”}
{{employee.gender}
{{employee.salary}}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" 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>
桌子{
边界塌陷：塌陷；
}
运输署{
边框：1px纯黑；
填充物：5px；
}
th{
填充物：5px；
文本对齐：左对齐；
光标：指针；
边框：1px纯黑；
}
复选框测试
名称
出生日期
性别
薪水
{{employee.firstName}
{{employee.dateOfBirth}日期：“dd/MM/yyyy”}
{{employee.gender}
{{employee.salary}}
<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>
复选框测试
名称
出生日期
性别
薪水
{{employee.firstName}
{{employee.dateOfBirth}日期：“dd/MM/yyyy”}
{{employee.gender}
{{employee.salary}}
那么你到底想要什么呢？我只需要在单击标题时排序，而不是在单击复选框时排序。具体如下:1。单击所需复选框并单击2。转到页眉，然后排序。希望这是有意义的。是的，我也尝试过，但我发现这不适用于单击复选框的不同情况-它们无法正确排序。是的，我相信我也尝试过，但当您取消选中并重新检查复选框时，复选框会动态返回排序。我认为需要在.js文件上编写一些代码。请参阅修改的应答器这很接近，但您会看到，在重复检查、取消选中并单击标题时，复选框将返回动态排序。我不确定这在这一点上是否会有角度，明白了。检查新的答案我终于想出了如何做到这一点，它是通过将orderBy注入控制器。这是我的最终Plunker版本的链接
angular.module('orderByExample3', [])
.controller('ExampleController', ['$scope', 'orderByFilter', function($scope, orderBy)