2016-05-30 20 views
-2

Bitte können Sie helfen? Ich brauche, um Tabellendaten auszuwählen zwei Daten zu filtern, indem Angular.js - Mein Code unten:So sortieren Sie Daten zwischen zwei Datumsangaben mit Angular.js

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

Hier habe ich zwei datepicker Felder aus. Wenn der Benutzer From date und To date auswählt, filtert der Datensatz Daten zwischen diesen beiden Datumsangaben einschließlich dieser Daten. Hier habe ich auch d.date, die Wert wie diese 2016-05-21 15:15:44 von DB enthält. Nach diesem Wert muss ich die Tabellendaten sortieren. Können Sie mir bitte helfen?

+0

Nein, ich brauche die in zwischen zwei Terminen ('von Datum und Bis date') zu bestellen. – satya

+0

Meinst du Bestellung oder Filter? –

+0

Lassen Sie mich wieder zu erklären.Supporte Tabelle hat viele Daten einschließlich Datum Zeit.Wenn Benutzer wählt zwei Datum 'von Datum und bis Datum ', Die Tabelle Daten zwischen diesen beiden Datum wird filtern und anzuzeigen. – satya

Antwort

0

Zu meinem Verständnis müssen Sie einen Weg Daten herauszufiltern zwischen ‚ab Datum‘ und ‚to date‘ und die Daten, die in aufsteigender Reihenfolge sortiert bekommen herausgefiltert, so dass dies könnte Sie interessieren Ich denke,
(auch ich fügte hinzu, Eingabefelder, da ich nicht einzelne Objekte erstellen wollte)

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>

+0

Nein, ich denke, es ist zu komplex.Ich habe bereits Daten in der Tabelle.Wenn der Benutzer zwei Daten entsprechend auswählen wird die Daten Fillter und Display. – satya

+0

@satyra was ist zu kompliziert? Wie fügt iyerrama25 dem Tisch neue Elemente hinzu? –

0

Einige Proof of concept und mit AngularJS Macht und am nächsten Mitternacht für prope finden r Datumsberechnungen

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>

+0

Ok, es scheint gut, aber es enthält keine höheren Datumsangaben. – satya

+0

@ Satyra höher als was? –

+0

bedeutet, nehme an, ich wählte zwischen 23, Mai bis 28, Mai.Es filtert nur '23. Mai 2016' nicht '28. Mai 2016' Daten. – satya

Verwandte Themen