角度复选框排序

一直在寻找我的独特案件涉及按选定的复选框排序，但到目前为止，我已经空了。我目前有一个工作示例（请参阅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>

正如你可以看到每列进行排序;然而，复选框正在被动态排序，这是不受欢迎的行为。提前致谢。

来源

2017-05-25 Eds

所以，你想究竟是什么？ –

我需要它仅在单击标题时进行排序，而不在单击复选框时进行排序。如下所示：1.点击所需的复选框，然后2.转到标题然后进行排序。希望这是有道理的。 – Eds

好的解决了你的问题。问题在于您在复选框中使用了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使用。

来源

2017-05-25 17:44:00

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>

来源

2017-05-25 17:50:44 chakeda

是的，我相信我也尝试过，但是当您取消选择并重新检查复选框时，复选框将返回到动态排序。我相信需要.js文件上的一些代码。 – Eds

查看修改的答案 – chakeda

这很接近，但您会看到在重复检查并取消选中并单击标题时，复选框将返回到动态排序。我不确定在这一点上这是否会出现问题。 – Eds

我能够通过注入排序依据筛选到控制器来解决这个问题。我更新了plunker代码以演示如何执行此操作。非常感谢您的回复。

https://plnkr.co/edit/MtlkshHSoVMw7R1knOzt?p=preview

angular.module('orderByExample3', []) 
.controller('ExampleController', ['$scope', 'orderByFilter', function($scope, orderBy)

来源

2017-05-26 23:57:16 Eds

角度复选框排序

回答

相关问题