Display float field in currency format using Filters in Angularjs

Asked

Viewed 6,143 times

1

I am working with Angularjs and to show the user a field using a comma, I am unfortunately obliged to do a replace at the point.

I wonder if there are any filter or directive to solve my case. In my code, I need a field float continue this way so that it can be sent to webservice, but for the user, a monetary field is separated by a comma and not by a point.

angularjs angularjs-directives

2 answers

2


More specifically:

{{ Valor | currency:'BRL':2 }}

To bring the comma, change your app.module as well.:

import { NgModule, LOCALE_ID } from '@angular/core';

.
.
.
@NgModule({
  ...
  providers: [
      ...
      { provide: LOCALE_ID, useValue: "pt-BR" },
      ...
  ],
  ...
})

  • excellent, I didn’t even remember that question. a detail is that the question was about Angularjs not Angular 2 ( 4.0) but as I am already working on 4.0 ended up helping me without wanting rsrs

1

You can do the formatting directly in the view, without having to manipulate the value through a filter or directive customized. Example:

$scope.meuValor = 10.3

<p>Valor: {{meuValor | currency}}</p>

If the automatic conversion is not done (added the R$), you can still set the display options, according to the documentation here, as the currency and number of houses after the comma.

{{campo | currency:sigla:casas}}
{{campo | currency:'R$':2}}

Take an example: http://jsfiddle.net/gwxvu921/

Edited:

I had forgotten the . separation of decimal place. This can be solved by using a file locale, like this: https://github.com/renato/bower-angular-locale-pt-br/blob/master/angular-locale_pt-br.js

Just load this file at the index, or as you see fit. I, for example, concatenate it with other function files by mounting a module I load as a dependency of module leading.

  • a monetary field is formed by a set of 2 boxes separated by a comma. had already seen in the angular documentation on the filter currencyand I know how it works but, it does not format with commas.

  • 1

    @Leandroluk I edited the answer, I believe your problem will be solved.

  • fantastic guy, I didn’t know that had how to modify the format of fields using something like this link...

  • 1

    In fact, as you can see in the file, it serves not only for the monetary issue, but for several other areas such as date, time, common names, etc.. I’ve even seen some locale particular with other settings, but also depends on the support. But with this you already have a good way.

Browser other questions tagged angularjs angularjs-directives

You are not signed in. Login or sign up in order to post.