[英]How to sort column with dates on md-data-table using md-order-by attribute
I'm trying to allow ordering a column of a md-data-table in AngularJS that contains dates. 我试图允许在AngularJS中排序包含日期的md-data-table的列。 These dates are strings with the format DD / MM / YYYY.
这些日期是格式为DD / MM / YYYY的字符串。 I can not get them ordered correctly.
我无法正确订购它们。 I have tried to call a function that returns the timestamp of the date from the md-order-by attribute, but it does not even call the function.
我试图调用一个函数,该函数从md-order-by属性返回日期的时间戳,但它甚至没有调用该函数。 The current code is the following and the column that I am trying to order is Fecha Nacimiento:
当前代码如下,我要订购的列是Fecha Nacimiento:
<table md-table md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" ng-model="selected"
md-progress="promise">
<thead md-head md-order="query.order">
<tr md-row>
<th md-column md-order-by="id"><span>Identificador</span></th>
<th md-column md-numeric md-order-by="fechaTimestamp(fechaNacimiento)"><span>Fecha Nacimiento</span></th>
<th md-column md-order-by="sexo"><span>Sexo</span></th>
<th md-column md-numeric md-order-by="altura"><span>Altura(cm)</span></th>
<th md-column><span>Grabaciones</span></th>
<th md-column><span>Atributos extra</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="paciente" md-on-select="logItem" md-auto-select="options.autoSelect"
ng-repeat="paciente in pacientes.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
<td md-cell ng-click="editarCampo($event, paciente, 'identificador')"
ng-class="{'md-placeholder': !paciente.id}">{{paciente.id || 'Añadir identificador'}}
</td>
<td md-cell ng-click="editarFecha($event, paciente)" ng-class="{'md-placeholder': !paciente.fechaNacimiento}">
{{paciente.fechaNacimiento
|| "Añadir fecha nacimiento"}}
</td>
<td md-cell>
<md-select ng-model="paciente.sexo" name="sexo" ng-change="editarSexo(paciente)" placeholder="Sexo" required>
<md-option value="Hombre">Hombre</md-option>
<md-option value="Mujer">Mujer</md-option>
<md-option value="Otro">Otro</md-option>
</md-select>
</td>
<td md-cell ng-click="editarCampo($event, paciente, 'altura')"
ng-class="{'md-placeholder': !paciente.altura}">{{paciente.altura || 'Añadir altura'}}
</td>
<td md-cell>
<md-button ng-click="redirect('grabaciones/' + paciente.id)"
style="background: lightgrey;" ng-show="paciente.grabaciones"
title="Ver grabaciones de {{paciente.id}}">Ver
</md-button>
</td>
<td md-cell>
<md-button ng-click="verAtributosExtra($event,paciente)" ng-show="paciente.extra"
style="background: lightgrey;"
title="Ver información extra de {{paciente.id}}">Ver
</md-button>
<md-button ng-click="verAtributosExtra($event,paciente)" ng-hide="paciente.extra"
style="background: lightgrey;"
title="Añadir atributos extra a {{paciente.id}}">Añadir
</md-button>
</td>
</tr>
</tbody>
</table>
Thanks in advance. 提前致谢。
Calling function on md-order-by
doesn't work. 在
md-order-by
上调用函数不起作用。 So what you'll have to do, is changing date property of pacients.data
objects. 因此,您需要做的就是更改
pacients.data
对象的date属性。 You saying you receiving it in the form of DD/MM/YYYY string right? 您说以DD / MM / YYYY字符串的形式收到它,对吗? So just manipulate pacients.data array & change date property to object with its own properties as value & ts (timestamp) in the view you can bind the
date.vale
& in md-order-by
you can bind date.ts
. 因此,只需操作pacients.data数组并将date属性更改为具有其自身属性(如value&ts(时间戳))的对象,即可在视图中绑定
date.vale
和md-order-by
date.vale
,从而可以绑定date.ts
For manipulation I've created one example with function as: 为了进行操作,我创建了一个具有以下功能的示例:
$scope.addDateTimestamps = function() {
var arrData = $scope.pacientes.data;
var newData = arrData.map(function(item,index) {
var dateString = item.date;
var dateParts = dateString.split("/");
var dateObject = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
item.date = {'value': dateString, 'ts': dateObject.getTime()};
return item;
});
$scope.pacientes.data = newData;
}
So this function will convert DD/MM/YYYY date to dateobject & then getting timestamp. 因此,此功能会将DD / MM / YYYY日期转换为dateobject然后获取时间戳。 Call this function when you get data from service & you create model.
从服务获取数据并创建模型时,请调用此函数。 You can follow below codepen where I've added date field with string values bind & sorting based on timestamp.
您可以按照下面的codepen进行操作,在其中我添加了带有字符串值的date字段,该值基于时间戳进行绑定和排序。
Alternatively you can even just change date property from array objects string to timestamp & then on view you can use date filter to show it in different formats & in md-order-by just date (ts) property 另外,您甚至可以只将date属性从数组对象字符串更改为timestamp,然后在视图上使用日期过滤器以不同的格式和md顺序(仅显示date(ts)属性)显示日期
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.