如何设置角度ngBind货币的样式

Question

我正在尝试使用angularjs和css：

基本上，如图所示，数字的小数部分应位于右上角。我知道，使用ng-bind，我们可以使它正常对齐。你有什么主意吗？谢谢。

Answer 1

值初始化（来自控制器）

$scope.model.currency = 10.20;

指令召唤

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

指令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';
          }
        }
      });
    }
  };
}]);

指令模板

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

指令造型

.currency {
  position: relative;
}

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

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

Answer 2

只有将2个部分分开才能进行此操作。例如，使用指令：

.directive("separatedCurrency", function() {
    return {
        restrict: "AE",
        scope: {
            amount: "=",
            symbol: "@",
            fraction: "="
        },
        template: "<span class='currency-main' ng-bind='amount | currency:symbol:0'></span><span class='currency-decimals' ng-bind='decimals'></span>",
        link: function (scope, element, attrs) {
            scope.fraction = scope.fraction || 2; // default 2 decimals
            scope.decimals = (scope.amount % 1) * (10^scope.fraction);
        }
    }
}

通过这种方式，您可以使用css单独设置currency-main和currency-decimals的样式。