<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Sample</title>
<script src="angular.js"></script>
<script src="sample.js"></script>
<style>
body { color:gray; }
h1 { font-size:18pt; font-weight:bold; }
span.label { display:inline-block;width:50px; color:red; }
input { width:100px; }
.msg { font-size:14pt; font-weight:bold;color:gray; }
</style>
</head>
<body ng-app="myapp" ng-init="num = 1000">
<h1>税額計算</h1>
<p>金額を入力して下さい。</p>
<div ng-controller="HeloController as ctl">
<div class="input">
<span class="label">tax:</span>
<input type="text" ng-model="ctl.tax">％
</div>
<div class="input">
<span class="label">price:</span>
<input type="text" ng-model="num">円
</div>
<p class="msg">税込： {{ctl.calcWithTax(num)}}円</p>
<p class="msg">税抜： {{ctl.calcWithoutTax(num)}}円</p>
</div>
</body>
</html>
angular.module('myapp',[])
.controller('HeloController',
function(){
this.tax = 8;
this.calcWithTax = function(val){
return Math.floor(val * (100 + this.tax * 1) / 100);
};
this.calcWithoutTax = function(val){
return Math.floor(val / (100 + this.tax * 1) * 100);
};
}
);
最終更新：2016年05月25日 00:33
