Give semantics to your web app using AngularJS

Make percent inputs conform to their true semantics, i.e. 27% is 0.27, just like in Excel. Not the textual 27 which necessitates manually dividing the number by 100 when using it further on expression.



When you input 27 on Interest Rate Per Annum textbox, the model’s returned value should be 0.27. Note the custom attribute percent below. AngularJS can augment your existing HTML and introduce new attributes to them, it can even create new HTML tags. The percent attribute automatically convert the percent input to its percent value.

<input type='text' ng-model='InterestRatePerAnnum' percent/>
  
<input type=’text’ ng-model='TotalContractPrice' />
 
.
.
.

var result = $scope.InterestRatePerAnnum * $scope.TotalContractPrice;

Live code: http://jsfiddle.net/b75xaj69/



Contrast to manual approach:

<input type='text' id='InterestRatePerAnnum' />
 
<input type=’text’ id='TotalContractPrice' />

.
.
.
 
var result = ($('#InterestRatePerAnnum').val() / 100) * $('#TotalContractPrice').val();