Angularjs简单网格表按日期排序

时间:2016-03-11 04:23:12

标签: javascript angularjs

我想点击一个按钮我想在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>

我不知道如何填写控制器来排序当前日期 帮助提前谢谢

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

您可以在控制器中创建一个功能,以便仅在今天的日期过滤表格数据。

$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/