web-dev-qa-db-fra.com

Mettre en forme une colonne de grille de l'interface graphique en tant que devise (RC 3.0)

Les options de grille ci-dessous affichent les données comme prévu. Mais si j'essaie de formater la valeur row.entity[col.field] dans mon cellTemplate, aucune donnée ne sera renvoyée.

Code:

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellTemplate: '<div>{{Number(row.entity[col.field]).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}}
    ]
};

Toute indication sur la manière de formater la colonne en tant que devise est appréciée.

Merci.

angularjsangular-ui-grid
14
dmalikyar

Vous pouvez utiliser cellFilter 'devise' pour formater vos données.

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellFilter: 'currency' }}
    ]
};
19
Aman Mahajan

Consultez cet article de Nice: http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

En résumé, vos options sont les suivantes:

  • Fixations
  • Filtres de cellules
  • Modèles de cellules
  • Liens
  • Boutons
  • Directives personnalisées

J'ai utilisé moi-même l'option Filtre de cellule (code traduit dans votre cas, non testé): 

$scope.gridOptions = {
   enableSorting: true,
   columnDefs: [
      {
          name: 'Award Title', 
          field: 'projectTitle', minWidth: 100
      }, {
          name: 'Amount', 
          field: 'awardAmount', 
          cellFilter: 'currencyFilter'
      }
   ] 
};

Avec filtre défini ci-dessous: 

app.filter('currencyFilter', function () { 
    return function (value) {
        return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    }
});

Cordialement, G

11
GuillaumeS

Je suis en retard à la fête, mais je voulais partager la meilleure chose qui a fonctionné pour moi:

JS:

myGrid.columnDefs = [{
    field: "Sale",
    cellFilter: 'number:2',
    cellClass:'currency'
}]

CSS:

.currency{
    text-align:right;
}
.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}

Résultat final:

 The final currency column

Détails:

J'ai d'abord essayé d'utiliser cellFilter:'currency' comme mentionné dans une réponse précédente, mais cela n'autorisait pas différents montants et n'alignait pas les valeurs à droite:

 Using only the currency filter.

Alors, j’ai ajouté une classe currency et right-align, qui fixaient l’alignement, mais pas des montants différents.

 Added alignment.

Malheureusement, je n’étais pas capable de trouver une solution facile à ce problème (bien que j’ai l’impression qu’il en existe un quelque part), j’ai donc dû changer le cellFilter de currency à number:2.

 Show 2 decimals

Ensuite, je voulais un signe dollar à la gauche de la cellule (pour éviter de varier les montants), pour cela j'ai ajouté le css suivant:

.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}

Ce qui m'a laissé avec le résultat final:

 Final column, right-aligned and compensating for various dollar amounts.

2
Travis Heeter

Vous pouvez utiliser l'attribut cellFilter et le filtre de devise angularJS par défautLive Demo - http://plnkr.co/edit/NSiCrM?p=preview

$scope.colDefs = [
    { field: 'firstName', 
      displayName: 'FN' 
    },
    { field: 'amount',
      displayName: 'AMT', 
      cellFilter: 'currency'
    }
  ];
1
Parshwa Bhavesh Mehta

Essayez quelque chose comme ceci, ceci applique des filtres natifs angulaires

cellTemplate: "<div>[[ row.entity[col.field]  | currency:'Q':2 ]]"
1
Henry Orozco

Enlevez bien votre $ de l'expression régulière pour commencer. Il suffit de le mettre après le tag. L'expression, en dehors de la partie $, fonctionne. On dirait que vous essayez simplement d'appeler une fonction Javascript dans le {{}} plutôt que d'appeler quelque chose dans votre contrôleur. Déplacez le numéro (). ToFixed (). Replace dans une fonction de votre contrôleur et appelez-le.

     $scope.asCurrency = function(val) {
       return Number(...).toFixed()......
     };
0
Scott