wagnerdelima wagnerdelima - 2 months ago 16
AngularJS Question

How to style angular ngBind currency

I am trying to make that with angularjs and css:
image

Basically, the decimal part of the number should be in the upper right corner as you see in the image. I know that, with ng-bind we can make it normally aligned. Do you have any idea? Thank you.

Answer

Value Initialization (from controller)

$scope.model.currency = 10.20;

Directive Call

<div gl-currency="model.currency"></div>

Directive JS

.directive('glCurrency', [function()
{
  return {
    scope: 
    {
      glCurrency: '='
    },
    restrict: 'A',
    templateUrl: 'currency.html',
    link: function($scope, element, attrs)
    {
      $scope.$watch('glCurrency', function(currency)
      {
        if(currency)
        {
          var split = currency.toString().split('.');

          if(Array.isArray(split))
          {
            $scope.number.dollars = split[0] ? split[0] : '0';
            $scope.number.cents = split[1] ? split[1] : '00';
          }
        }
      });
    }
  };
}]);

Directive Template

<div class="currency">
  <span class="currency__dollars">{{ number.dollars }}</span>
  <span class="currency__cents">{{ number.cents }}</span>
</div>

Directive Styling

.currency {
  position: relative;
}

.currency__dollars {
  font-size: 24px;
  padding-right: 10px; 
}

.currency__cents {
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
}