Sto tentando di applicare un filtro dell'intervallo di date su Smart Table angolare (http://lorenzofox3.github.io/smart-table-website/), tuttavia, non sono stato in grado di farlo. L'unico esempio che vedo online è il seguente: http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=preview anch'esso rotto.Intervallo di date con il filtro Smart Table angolare
Questo è il mio HTML:
<div st-table="releaseListDisplay" st-safe-src="releaseList">
<div class="filter-box">
<st-date-range></st-date-range>
</div>
<table class="list-page">
<thead>
<tr>
<th st-sort="releaseNum">Release#</th>
<th class="p15">Product Name</th>
<th st-sort="dateInternalRelease">Int. Release Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="release in releaseListDisplay">
<td>{{release.releaseNum}}</td>
<td>{{release.buildNum}}</td>
<td>{{release.dateInternalRelease | date:'yyyy-MM-dd'}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9">
<div st-pagination="" st-items-by-page="10"></div>
</td>
</tr>
</tfoot>
</table>
</div>
Questo è il contenuto del file template.html di direttiva st-date-range:
<label for="fromdate">From:</label>
<input type="date" name="fromdate" id="fromdate"
placeholder="MM/DD/YYYY" ng-model="fromDate"/>
<label for="todate">To:</label>
<input type="date" name="todate" id="todate"
placeholder="MM/DD/YYYY" ng-model="toDate"/>
e questa è la direttiva:
app.directive('stDateRange', function($timeout){
return{
restrict:'E',
require:'^stTable',
templateUrl:'template.html',
scope:false,
link: function(scope,element,attr,ctrl){
var tableState = ctrl.tableState();
scope.$watchGroup(["fromDate","toDate"],
function(newValues,oldValues){
if(newValues){
var start = newValues[0];
var end = newValues[1];
if(start && end){
var d1 = new Date(start);
var d2 = new Date(end);
ctrl.search({after:d1.getTime(),before:d2.getTime()},'dateInternalRelease');
}
}
}
);
}
};
});
Ho anche provato a utilizzare $ filtro per filtrare i record in releaseList utilizzando la funzione comparatore, ma poi si interrompe l'impaginazione di Smart Table.
Ho davvero bisogno di un aiuto rapido qui. Grazie mille!
il primo collegamento plunker che hai postato in OP funziona per me – Serge
ma è veramente rotto con gli ultimi angularjs/angular-ui-bootstrap – Serge