J'utilise angularjs avec ui-grid. Une colonne de la grille contient un horodatage que je voudrais afficher comme une date correctement formatée.
Jusqu'à présent, j'ai essayé comme ça mais la fonction n'est jamais appelée.
$scope.formatDate = function(date) {
return '42';
};
$scope.columns = [
{field: 'date', cellTemplate: '<div class="ui-grid-cell-contents">formatDate({{row.entity.date}})</div>'},
{field: 'title'},
{field: 'quantity'},
//[...]
];
Au lieu de cela, l'appel de fonction est considéré comme un littéral de chaîne. En conséquence, la colonne affiche toujours formatDate(*timestamp*)
.
J'ai seulement trouvé un moyen non satisfaisant d'y parvenir en définissant une fonction sur chaque rangée lors de leur réception:
$scope.columns = [
{field: 'getFormattedDate()'},
//[...]
];
$http.post('/api/data/').success(function (data) {
$scope.gridOptions.data = data.elements;
$scope.gridOptions.data.forEach(function(row) {
row.getFormattedDate = function() {
return '42';
}
})
});
Une meilleure suggestion?
Si vous souhaitez accéder aux fonctions de niveau d'étendue du contrôleur à l'aide de ui-grid
, vous pouvez utiliser grid.appScope
, voici un exemple rapide:
{
name: 'date',
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
}
Exemple complet:
angular.module('myApp', ['ui.grid'])
.controller('myCtrl', ['$scope', function ($scope) {
$scope.parseDate = function (p) {
// Just return the value you want to output
return p;
}
$scope.parseName = function (p) {
// Just return the value you want to output
return p;
}
$scope.gridOptions = {
data: [{
name: "Foo",
date: "2015-10-12"
}, {
name: "Bar",
date: "2014-10-12"
}],
columnDefs: [{
name: 'name',
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseName(row.entity.name)}}</div>'
}, {
name: 'date',
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
}]
};
}]);
Pour utiliser la sortie de la fonction, l'appel de la fonction complète, et non les arguments, doit être placé entre accolades d'expression
<div class="ui-grid-cell-contents">{{ formatDate(row.entity.date) }}</div>
Il est à noter que la variable cellTemplate
ne fera rien si vous n'incluez pas HTML dans le format suivant:
n'utilisera pas la méthode de formatage "formatEvaluation ()":
columnDefs: [
{
name: 'starRating', headerCellClass: 'blue', headerTooltip: 'Star Rating',
cellTemplate: '{{grid.appScope.formatRating(row.entity.starRating)}}'
},
Fonctionne avec l'ajout d'un <span>
dans le cellTemplate:
columnDefs: [
{
name: 'starRating', headerCellClass: 'blue', headerTooltip: 'Star Rating',
cellTemplate: '<span>{{grid.appScope.formatRating(row.entity.starRating)}}</span>'
},
ma méthode de formatage:
$scope.formatRating = function (starRating) {
switch (starRating) {
case "ONE": return "1/5"; break;
case "TWO": return "2/5"; break;
case "THREE": return "3/5"; break;
case "FOUR": return "4/5"; break;
case "FIVE": return "5/5"; break;
}
}