如何風格角度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

這隻能在您將兩部分分開的情況下完成。例如用指令：

.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分開。