Been looking around for my unique case involving sorting by selected checkboxes, but so far I have come up empty. I currently have a working example (see http://ift.tt/2r0L8Vo) but unfortunately the requirements are such that two-way binding is not acceptable. Instead, the requirements are that I must select the header and then initiate the sort by selected checkboxes.
Here is the controller.
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;
}
});
And here is the 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></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
As you can see each columns are being sorted; however, the checkbox is being sorted dynamically, which is undesired behavior. Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire