Ensure Angular JS includes a space or special character after applying a currency filter

Question

Ensure Angular JS includes a space or special character after applying a currency filter

Is there a way to include a space or special character after the "₹" symbol?

Desired output: ₹ 49

Current output: ₹49

HTML - {{cart.getTotalPrice() | currency:"₹"}}

javascript angularjs

Answer 1

Answer №1

Don't bother trying to achieve it with the currency filter. Just stick to using the number filter.

 <div ng-controller="MyCtrl">
            <input class="tb" ng-model="numberInput" type="text" />            {{ "₹  "+(numberInput | number:2) }}              
  </div>

DEMO

var app = angular.module("app", []);
app.controller('AddSiteURLCntr', function($scope, $sce) {
  $scope.numberInput = '1275.23';
   
})

<!DOCTYPE html>
<html>

<head>
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caaba4adbfa6abb8e4a0b98afbe4fee4fd">[email protected]</a>" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app='app'>
  <div ng-controller="AddSiteURLCntr">
      <input class="tb" ng-model="numberInput" type="text" />            {{ "₹  "+(numberInput | number:2) }}     
  </div>
</body>
</html>

Answer 2

Don't bother trying to achieve it with the currency filter. Just stick to using the number filter.

 <div ng-controller="MyCtrl">
            <input class="tb" ng-model="numberInput" type="text" />            {{ "₹  "+(numberInput | number:2) }}              
  </div>

DEMO

var app = angular.module("app", []);
app.controller('AddSiteURLCntr', function($scope, $sce) {
  $scope.numberInput = '1275.23';
   
})

<!DOCTYPE html>
<html>

<head>
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caaba4adbfa6abb8e4a0b98afbe4fee4fd">[email protected]</a>" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app='app'>
  <div ng-controller="AddSiteURLCntr">
      <input class="tb" ng-model="numberInput" type="text" />            {{ "₹  "+(numberInput | number:2) }}     
  </div>
</body>
</html>

Answer 3

Answer №2

Give this a shot

Check it out

<span ng-bind="displayPrice(cart.getTotalPrice())"></span>&nbsp;
<span ng-bind="extractCurrency(cart.getTotalPrice())"></span>

Handler

 $scope.displayPrice = function (item) {
    return ($filter('currency')(item,'$')).substring(0,1);
 }

 $scope.extractCurrency = function (item) {
    return ($filter('currency')(item,'$')).substring(1,item.length);
  }

Answer 4

Give this a shot

Check it out

<span ng-bind="displayPrice(cart.getTotalPrice())"></span>&nbsp;
<span ng-bind="extractCurrency(cart.getTotalPrice())"></span>

Handler

 $scope.displayPrice = function (item) {
    return ($filter('currency')(item,'$')).substring(0,1);
 }

 $scope.extractCurrency = function (item) {
    return ($filter('currency')(item,'$')).substring(1,item.length);
  }

Answer 5

Answer №3

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app="my-unique-app">
<div ng-controller="my-custom-controller">
<input type="number" name="price" ng-model="totalPrice">
<p>{{getTotalPrice() | currency : "&#8377;  "}}</p>
</div>
<script type="text/javascript">
var customApp = angular.module("my-unique-app",[]);
customApp.controller("my-custom-controller",function($scope){
$scope.totalPrice = 0;
$scope.getTotalPrice = function(){
return $scope.totalPrice;
}
});

</script>
</body>
</html>

Answer 6

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app="my-unique-app">
<div ng-controller="my-custom-controller">
<input type="number" name="price" ng-model="totalPrice">
<p>{{getTotalPrice() | currency : "&#8377;  "}}</p>
</div>
<script type="text/javascript">
var customApp = angular.module("my-unique-app",[]);
customApp.controller("my-custom-controller",function($scope){
$scope.totalPrice = 0;
$scope.getTotalPrice = function(){
return $scope.totalPrice;
}
});

</script>
</body>
</html>

Answer 7

Answer №4

To achieve the desired output, simply add a space after each symbol.

Example - {{change.getPrice() | currency:"$ "}}

Follow this format and you will see the result you want...

Answer 8

To achieve the desired output, simply add a space after each symbol.

Example - {{change.getPrice() | currency:"$ "}}

Follow this format and you will see the result you want...

Answer 9

Answer №5

If you want to customize the currency filter, you can create your own filter for handling money values...

angular.module('customModuleName').filter('moneyConverter', customFilter);

function customFilter($filter, $locale) {

  const formats = $locale.NUMBER_FORMATS;

  return function(amount, currencySymbol) {

    if (!currencySymbol) currencySymbol = formats.CURRENCY_SYM + ' ';

    return $filter('currency')(amount, currencySymbol);
  };
}

Once you have created your new filter named 'moneyConverter', you can utilize it in your code like this...

<span>{{vm.totalAmount | moneyConverter}}</span>

Answer 10

If you want to customize the currency filter, you can create your own filter for handling money values...

angular.module('customModuleName').filter('moneyConverter', customFilter);

function customFilter($filter, $locale) {

  const formats = $locale.NUMBER_FORMATS;

  return function(amount, currencySymbol) {

    if (!currencySymbol) currencySymbol = formats.CURRENCY_SYM + ' ';

    return $filter('currency')(amount, currencySymbol);
  };
}

Once you have created your new filter named 'moneyConverter', you can utilize it in your code like this...

<span>{{vm.totalAmount | moneyConverter}}</span>

Ensure Angular JS includes a space or special character after applying a currency filter

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Troubleshooting material design CSS problem in AngularJS routing module

Issue with Angular FormControl Pattern Validator failing to validate against regex pattern

Tips on how to implement dropdownlist filtering with angularJs based on the selection from another dropdownlist

An error of type 'TypeError' has occurred, where it is unable to access the property 'render' of an undefined element in

What's the best grid to use with Angular JS?

Trouble with the navigation of the JavaScript image gallery: next and previous buttons are not

I need help figuring out how to represent a nested array within an array of objects within my data instance in Vue

Is innerHTML incapable of executing JavaScript code?

Is my Socket.io application consuming excessive bandwidth? What might be causing this issue?

Switch the watch feature on and off using AngularJS

Revolutionizing Form Select Field: Introducing Rails' Dynamic Input Rendering

Creating a personalized Material UI theme for enhancing the appearance of a Next.js App Router

Traversing JSON data in a recursive manner without definite knowledge of its size or nesting levels

A guide on creating a Utility function that retrieves all elements in an array starting from the third element

Divide an HTML file into separate documents upon submitting a form

JavaScript program that continuously reads and retrieves the most recent data from a dynamically updating JSON file at regular intervals of every few seconds

I keep encountering an attach() error every time I try to close a modal that contains a vee-validated form

Creating a structure object in a Laravel controller for implementing Vue.js autocomplete functionality

How to update data in AngularJS grid component using ng-bind directive

How can I make the top two divs stay fixed as I scroll down, and then reset back to their initial position when scrolled