Angularjs table sort filter

前端之家收集整理的这篇文章主要介绍了Angularjs table sort filter前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

写着怕以后用的着的时候望了

  1. <table class="table table-bordered">
  2. <thead>
  3. <tr>
  4. <th>
  5. <input type="checkBox" ng-click="SearchVM.selectall()" />
  6. </th>
  7. <th>
  8. <a href="" ng-click="SearchVM.orderByField='Forename'; SearchVM.reverseSort = !SearchVM.reverseSort">
  9. Forename <span ng-show="SearchVM.orderByField == 'firstName'">
  10. <span ng-show="!SearchVM.reverseSort">^</span><span ng-show="SearchVM.reverseSort">v</span>
  11. </span>
  12. </a>
  13. </th>
  14. <th>
  15. <a href="" ng-click="SearchVM.orderByField='Surname'; SearchVM.reverseSort = !SearchVM.reverseSort">
  16. Surname <span ng-show="SearchVM.orderByField == 'lastName'">
  17. <span ng-show="!SearchVM.reverseSort">^</span><span ng-show="SearchVM.reverseSort">v</span>
  18. </span>
  19. </a>
  20. </th>
  21. <th>
  22. <a href="" ng-click="SearchVM.orderByField='Email'; SearchVM.reverseSort = !SearchVM.reverseSort">
  23. Email <span ng-show="SearchVM.orderByField == 'email'">
  24. <span ng-show="!SearchVM.reverseSort">^</span><span ng-show="SearchVM.reverseSort">v</span>
  25. </span>
  26. </a>
  27. </th>
  28. <th>
  29. <a href="" ng-click="SearchVM.orderByField='SecurityGroup'; SearchVM.reverseSort = !SearchVM.reverseSort">
  30. Security Group <span ng-show="SearchVM.orderByField == 'securitygroup'">
  31. <span ng-show="!SearchVM.reverseSort">^</span><span ng-show="SearchVM.reverseSort">v</span>
  32. </span>
  33. </a>
  34. </th>
  35. <th>
  36. <a href="" ng-click="SearchVM.orderByField='UserStatus'; SearchVM.reverseSort = !SearchVM.reverseSort">
  37. User Status <span ng-show="SearchVM.orderByField == 'status'">
  38. <span ng-show="!SearchVM.reverseSort">^</span><span ng-show="SearchVM.reverseSort">v</span>
  39. </span>
  40. </a>
  41. </th>
  42. <th>
  43. <a href="" ng-click="SearchVM.orderByField='adviser'; SearchVM.reverseSort = !SearchVM.reverseSort">
  44. Consultant <span ng-show="SearchVM.orderByField == 'adviser'">
  45. <span ng-show="!SearchVM.reverseSort">^</span><span ng-show="SearchVM.reverseSort">v</span>
  46. </span>
  47. </a>
  48. </th>
  49. <th>
  50.  
  51. </th>
  52. </tr>
  53. </thead>
  54. <tbody>
  55. <tr>
  56. <td></td>
  57. <td>
  58. <input type="text" class="form-control" ng-model="search.Forename" />
  59. </td>
  60. <td>
  61. <input type="text" class="form-control" ng-model="search.Surname" />
  62. </td>
  63. <td>
  64. <input type="text" class="form-control" ng-model="search.Email" />
  65. </td>
  66. <td>
  67. <input type="text" class="form-control" ng-model="search.SecurityGroup" />
  68. </td>
  69. <td>
  70. <input type="text" class="form-control" ng-model="search.UserStatus" />
  71. </td>
  72. <td>
  73. <input type="text" class="form-control" ng-model="search.adviser" />
  74. </td>
  75. <td />
  76. </tr>
  77. <tr ng-repeat="user in SearchVM.currentpageuser|orderBy:SearchVM.orderByField:SearchVM.reverseSort|filter: search">
  78. <td>
  79. <input type="checkBox" ng-model="user.Selected" />
  80. </td>
  81. <td>
  82. {{user.Forename}}
  83. <!--<a href="" ng-click="SearchVM.displaydetail(emp.individualid)">{{emp.firstName}}</a>-->
  84. </td>
  85. <td>{{user.Surname}}</td>
  86. <td>{{user.Email}}</td>
  87. <td>{{user.SecurityGroup}}</td>
  88. <td>{{user.UserStatus}}</td>
  89. <td>{{user.AdviserFullName}}</td>
  90. <td>
  91. <input type="button" value="View Detail" ng-click="SearchVM.displaydetail(user.IndividualId,user.LoginId)" />
  92. </td>
  93. </tr>
  94. </tbody>
  95. </table>

猜你在找的Angularjs相关文章