CODEWITHSUNDEEP
cssangularjs
Abiel Muren
Abiel Muren

Reputation: 365

Can I just style decimals of a number in Angular?

I am trying to style just the decimals to look just like this:

enter image description here

Didn't had success, I guess that I need to make my own filter, tried but didn't had success either, I guess it is because I am using it inside a state.

Here the code I am using for the number:

<h2><sup>$</sup>{{salary | number:0}}<sub>.00</sub></h2>

Inside the .app iam using this scope:

$scope.salary = 9000;

Thing is, number can be whatever the user salary is, it get the number from an input, in other places I have more numbers with decimals too.

Possible solutions:

Upvotes: 2

Views: 836

Answers (2)

kicken
kicken

Reputation: 2167

Use a directive that will split the amount and generate the proper HTML. For example:

app.directive('salary', function(){
  return {
      restrict: 'E'
      , scope: {
          salary: '@'
      }
      , controller: controller
      , controllerAs: 'dvm'
      , bindToController: true
      , template: '<h2><sup>$</sup>{{ dvm.dollar }}<sub>.{{ dvm.cents }}</sub></h2>'
  };

  function controller(){
    var parts = parseFloat(this.salary).toFixed(2).split(/\./);
    this.dollar = parts[0];
    this.cents = parts[1];
  }
});

Upvotes: 2

nikjohn
nikjohn

Reputation: 21850

The easiest solution would be to split out the number into it's decimal portion and the whole number portion:

var number = 90000.99111;

console.log(number % 1);

Use this in your controller, and split your scope variable into an object:

 $scope.salary = {
    whole: salary,
    decimal: salary % 1
  }

Protip: Using an object like this is better than using two scope variables for performance

Upvotes: 0

Related Questions