如何使用 Angular.js 对两个日期之间的数据进行排序？
[英]How to sort data in between two date using Angular.js?
问题描述
I need to filter table data selecting two dates using Angular.js.
我需要使用 Angular.js 过滤选择两个日期的表数据。 My code below:我的代码如下：
<div class="col-md-3">
<div class="input-group datepicker" date-format="yyyy-MM-dd" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input type="text" name="birthdate" class="form-control" id="date" ng-model="date" placeholder="From date" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="col-md-3">
<div class=" input-group datepicker" date-format="yyyy-MM-dd" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input type="text" name="birthdate" class="form-control" id="date" ng-model="date1" placeholder="To date" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<tbody id="detailsstockid">
<tr ng-repeat="d in clickDetail">
<td>{{$index+1}}</td>
<td>{{d.rest_name}}</td>
<td>{{d.Android}}</td>
<td>{{d.IOS}}</td>
<td>{{d.resultant_counter}}</td>
<td>{{d.date}}</td>
</tr>
</tbody>
Here I have two datepicker fields.这里我有两个datepicker字段。 When user will select From date and To date the record will filter data in between these two date including these dates also.当用户选择From date和To date ，记录将过滤这两个日期之间的数据，包括这些日期。 Here I have also d.date which contains value like this 2016-05-21 15:15:44 from DB.在这里，我还有d.date ，其中包含来自 DB 的类似2016-05-21 15:15:44值。 As per this value I need to sort the table data.根据这个值，我需要对表数据进行排序。
2 个解决方案
解决方案1
0 2016-05-30 13:04:21
To my understanding you need a way to filter out dates between 'from date' and 'to date' and the dates that get filtered out are sorted in ascending order, so this might interest you I guess据我了解，您需要一种方法来过滤“从日期”和“截止日期”之间的日期，并且过滤掉的日期按升序排序，所以我猜这可能会让您感兴趣
(Also I added input fields since I didn't want to create individual objects) （我还添加了输入字段，因为我不想创建单个对象）
var app = angular.module('MyApp', []); app.controller('MainCtrl', ['$scope', function($scope){ $scope.obj = {}; $scope.arr = []; $scope.filterdObj = []; $scope.obj.pushEntry = function(){ $scope.arr.push({ 'date': $scope.inDate, 'android': $scope.inAnd, 'ios': $scope.inIOS }); console.log('$scope.arr: ', $scope.arr); } $scope.obj.check = function(){ console.log('called me', $scope.fromDate); var d1 = new Date($scope.fromDate); var d2 = new Date($scope.toDate); if(d1.getTime() > d2.getTime()) console.log('error'); else{ for(i in $scope.arr){ var cmp = new Date($scope.arr[i].date); if(d1.getTime() <= cmp.getTime() && d2.getTime() >= cmp.getTime()){ console.log('Val in between'); $scope.filterdObj.push($scope.arr[i]) } } } } }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="MyApp" ng-controller="MainCtrl"> <div id='one'> <input type='date' id='date1' ng-model="inDate" /> <input type='text' id='android' ng-model="inAnd" /> <input type='text' id='ios' ng-model="inIOS" /> <input type='button' value="enter" ng-click='obj.pushEntry()' /> </div> <br><hr> <div id='two'> <input type='date' ng-model='fromDate' /> <input type='date' ng-model='toDate' /> <input type='button' value='set' ng-click='obj.check()'/> </div> <br><hr> <div id='disp'> <table class='table'> <tr> <th>Date</th> <th>Android</th> <th>IOS</th> </tr> <tr ng-repeat="obj in filterdObj | orderBy: 'date'"> <td>{{obj.date}}</td> <td>{{obj.android}}</td> <td>{{obj.ios}}</td> <tr> </table> </div> </body>
解决方案2
0 2016-05-30 13:37:12
Some proof of concept and with AngularJS power and finding closest midnight for proper date calculations一些概念证明和 AngularJS 的强大功能，并找到最近的午夜进行正确的日期计算
angular.module('app', []) .controller('ctrl', function($filter) { var events = [{ date: Date.now(), desc: 'first' }, { date: Date.now() - 24 * 3600 * 1000 * 7, // 7 days ago desc: 'third' }, { date: Date.now() - 24 * 3600 * 1000 * 2, // 2 days ago desc: 'second' }] this.date = null this.getFilteredEvents = function(from, to) { if (!(from && to) && angular.isDate(from) && angular.isDate(to)) { return events } function getMidnight(date) { return (new Date(new Date(date).getFullYear(), new Date(date).getMonth(), new Date(date).getDate())) } return events.filter(function(event) { return getMidnight(event.date + 24 * 3600 * 1000).getTime() >= (new Date(from)).getTime() && getMidnight(event.date).getTime() <= (new Date(to)).getTime() }) } })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app'> <div ng-controller='ctrl as c'> <label for="from">from</label> <input type="date" id="from" ng-model="c.date.from" /> <label for="to">to</label> <input type="date" id='to' ng-model="c.date.to" /> <ul> <li ng-repeat="event in c.getFilteredEvents(c.date.from, c.date.to) | orderBy:'-date'"> <dl> <dt>{{ event.desc }}</dt> <dd>{{ event.date | date }}</dd> </dl> </li> </ul> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.