我希望小數點前的數字的字號大於小數點後的數字

Question

我想要小數點前的數字的字號大於小數點後的數字。我已經通過分配類使用jquery來完成此操作。有沒有辦法做同樣的angularjs] [1]

.tdSplit { 
     text-align: right; 
    } 

    .tdGreen { 
     font-size:20px; 
    } 

    .tdRed { 
     font-size:10px; 
    } 
</style> 
    <script> 
    $(document).ready(function() { 
     $('.tdSplit').each(function (index, obj) { 
      var vPreAmount = obj.innerText.split(".")[0]; 
      var vPostAmount = obj.innerText.split(".")[1]; 
      obj.innerHTML = "<span class='tdGreen'>" + vPreAmount + ".</span><span class='tdRed'>" + vPostAmount + "</span>"; 
     }); 
    }); 
</script> 

    <table class="auto-style1"> 
      <tr> 
       <td>Amount 1:</td> 
       <td class="tdSplit">10234.56</td> 
      </tr> 
      <tr> 
       <td>Amount 2:</td> 
       <td class="tdSplit">5677.67</td> 
      </tr> 
     </table> 

Answer 1

我推薦一個自定義過濾器：

var app = angular.module('app', []); 
 
app.filter('money', function($sce) { 
 
    return function(data) { 
 
     var strData = parseFloat(Math.round(data * 100)/100).toFixed(2); 
 
     var vPreAmount = strData.split(".")[0]; 
 
     var vPostAmount = strData.split(".")[1]; 
 
     var innerHTML = $sce.trustAsHtml("<span class='tdGreen'>$" + vPreAmount + ".</span><span class='tdRed'>" + vPostAmount + "</span>"); 
 
     return innerHTML; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<style> 
 
    .tdGreen { 
 
    font-size: 20px; 
 
    } 
 
    .tdRed { 
 
    font-size: 10px; 
 
    } 
 
</style> 
 
<div ng-app="app"> 
 
    <span ng-bind-html="35.66 | money"></span> 
 
</div>