Angularjs 简单网格 表按日期排序

Angularjs simple grid Table sort by date

本文关键字：日期 排序 网格 简单 简单网 Angularjs      更新时间：2023-09-26

我想要一个按钮，我想在angularjs中对带有今天日期的表格进行排序。如果这是我的角度视图页面。

 <div class="form-inline has-feedback filter-header">
      <input type="text" class="form-control" placeholder="Search" ng-model="search.$" />
      <!-- <i class="glyphicon glyphicon-search form-control-feedback"></i> -->
      <button class="btn btn-default btn-sm" ng-click="hideFilter=!hideFilter">Advanced Search</button>
              </div>
        <a class="btn btn-default btn-sm pull-right" href="/#/add">Add New</a>
      </div> <!-- Grid filter ends -->
      <table class="table table-striped table-condensed table-responsive table-hover">
        <thead class="data-grid-header">
          <!-- table header -->
          <tr>
            <th>
              <span class="fa fa-th-large"></span>&nbsp;&nbsp;
              <a href="" ng-click="orderByField='title'; reverseSort = !reverseSort">Title</a>
            </th>
            <th class="hidden-xs">
              <span class="fa fa-calendar"></span>&nbsp;&nbsp;
              <a href="" ng-click="orderByField='startDate'; reverseSort = !reverseSort">Schedule Date</a>
            </th>
          </tr>
          <!-- table filter -->
          <tr ng-hide="hideFilter">
            <th><span ng-hide="hideFilter"><input type="text" ng-model="search.title"></span></th>
           </tr>      
        </thead>
        <tbody class="data-grid-data">
          <tr ng-repeat="visit in visitsList | filter: dateRange | filter: search |orderBy:orderByField:reverseSort">
            <td>{{visit.title}}</td>
            <td>{{visit.startDate | date:medium}}
         </tr>
       </tbody>
      </table>

我不知道如何填充控制器以对当前日期进行排序。
提前提供帮助谢谢

您可以在控制器中创建一个函数，以仅筛选当天日期的表数据。

$scope.filterDates = function() {
    //Get the current date.
    var currentDate = $filter('date')(new Date(), "MM/dd/yyyy");
    $scope.users.forEach(function(user) {
        //convert dates to currentDate format for comparing.
        user.previousLogin = $filter('date')(user.previousLogin, "MM/dd/yyyy");
    });
    //filter and update users list.
    $scope.filteredUsers = $filter('filter')($scope.users, {previousLogin: currentDate});
}

然后从按钮调用ng-click函数。

小提琴：https://jsfiddle.net/npwug6xd/

下面的代码将有助于按升序对带有开始日期的行进行排序。

<tr ng-repeat="visit in visitsList | orderBy: 'startDate'">
    <td>{{visit.title}}</td>
    <td>{{visit.startDate | date:medium}}
</tr>
相关文章：