我试图允许在AngularJS中订购包含日期的md-data-table列。这些日期是格式为DD / MM / YYYY的字符串。我无法正确地订购它们。我试图调用一个函数,该函数从md-order-by属性返回日期的时间戳,但它甚至不调用该函数。当前代码如下,我尝试订购的列是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>
提前致谢。
答案 0 :(得分:2)
md-order-by
上的通话功能不起作用。所以你需要做的是改变pacients.data
个对象的日期属性。你说你以DD / MM / YYYY字符串的形式收到它吗?所以只需操作pacients.data array&amp;将date属性更改为object,并将其自身的属性更改为value&amp;视图中的ts(时间戳)可以绑定date.vale
&amp;在md-order-by
中,您可以绑定date.ts
。
对于操作,我创建了一个函数为:
的示例$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;
}
所以这个函数会将DD / MM / YYYY日期转换为dateobject&amp;然后得到时间戳。从服务中获取数据时调用此函数&amp;你创建模型。 您可以在下面的codepen中按照字符串值bind&amp;添加日期字段。基于时间戳排序。
或者你甚至可以只将数组对象字符串中的日期属性更改为timestamp&amp;然后在视图中,您可以使用日期过滤器以不同的格式显示它在md-order-by just date(ts)property
<强> Codepen Eample 强>