Format d'une interface utilisateur-une grille de colonne en tant que monnaie (RC 3.0)

La grille ci-dessous les options afficher les données comme prévu. Mais Si je tente de formater le row.entity[col.field] valeur dans mon cellTemplate, je n'ai pas toutes les données renvoyées.

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, '$&,')}}
    ]
};

Des conseils sur la façon de formater la colonne que la monnaie est apprécié.

Grâce.

En êtes-vous des erreurs dans la console? Pas sûr de ce que le but de la remplacer() la partie de votre expression est comme toFixed() devrait vous donner ce que vous voulez, mais ça ne semble pas être question ici.
Pas d'erreurs dans la console. Mon objectif, c'est que si je rentre '1234' pour le montant, je le veux formaté comme $1,234.00.

OriginalL'auteur dmalikyar | 2015-01-02

angular-ui-grid angularjs

19

Vous pouvez utiliser "monnaie" cellFilter de format de vos données.
```
$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellFilter: 'currency' }}
    ]
};
```
C'est le moyen le plus simple, plutôt que de coder votre propre. Vous pouvez également personnaliser la pour les le symbole de la monnaie et le nombre de chiffres après la virgule, comme ceci: cellFilter: 'currency:"£" : 5'

OriginalL'auteur Aman Mahajan

Jeter un oeil à 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 :

Liaisons
Cellule Filtres
Modèles Cellulaires
Liens
Boutons
Des directives sur mesure

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

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

Avec filtre ci-après définies :

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

Cheers,
G

OriginalL'auteur GuillaumeS

2

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:

Détails:

J'ai d'abord essayé d'utiliser cellFilter:'currency' comme mentionné dans une précédente réponse, mais il ne permet pas de bénéficier de divers montants en dollars et n'a pas d'aligner les valeurs de la droite:

Alors j'ai ajouté un currency classe, et right-align, qui fixe en alignement, mais pas les différents montants en dollars.

Malheureusement, je n'ai pas pu trouver un moyen facile pour résoudre ce problème (bien que je me sens comme il y en a un là, quelque part), donc j'ai dû changer la cellFilter de currency à number:2 - ce qui signifie "Toujours afficher les 2 décimales".

Alors que je voulais un signe de dollar à gauche de la cellule (pour éviter les divers montants en dollars), pour cela j'ai ajouté le code css suivant:
```
.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}
```
Qui m'a laissé avec le résultat final:

OriginalL'auteur Travis Heeter
1

Essayer quelque chose comme cela, cela s'applique angulaire des filtres natifs
```
cellTemplate: "<div>[[ row.entity[col.field]  | currency:'Q':2 ]]"
```
OriginalL'auteur Henry Orozco

Vous pouvez utiliser cellFilter attribut par défaut et angularJS monnaie filtre
Démonstration En Direct - http://plnkr.co/edit/NSiCrM?p=preview

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

OriginalL'auteur Parshwa Bhavesh Mehta

0

Bien prendre votre $ de l'expression régulière pour commencer. Le mettre juste après la balise. L'expression, en dehors de l'$, travaille en. Il semble que vous essayez juste d'appeler une fonction Javascript dans les {{ }} plutôt que d'appeler quelque chose dans votre contrôleur. Déplacez le Nombre().toFixed().remplacer en fonction de votre contrôleur et l'appeler au lieu
```
     $scope.asCurrency = function(val) {
       return Number(...).toFixed()......
     };
```
OriginalL'auteur Scott

Vous devez vous connecter pour publier un commentaire.

Détails: