<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angularjs service</title>
<link rel="stylesheet" href="lib/bootstrap-3.3.7/dist/css/bootstrap.css">
<style>
.zh-input {
90px;
display: inline-block;
}
.zh-tab {
margin-bottom: 10px;
}
.zh-shou-yi {
font-size: 29px;
}
.mgl10 {
margin-left: 10px;
}
.ftwbold {
font-weight: bold;
font-size: 17px;
}
</style>
</head>
<body style="margin: 20px">
<div ng-controller="myController">
<ul class="nav nav-tabs zh-tab">
<li role="presentation" ng-click="tabChange('singleInvest')" ng-class="{'active': showType === 'singleInvest'}">
<a href="#">计算</a>
</li>
</ul>
<label class="ftwbold">起征点：</label>
<input type="text" class="form-control zh-input" ng-model="qiZhengDian"><br>
<label class="ftwbold">Tup：</label>{{tup}}<br>
<label class="ftwbold">年终奖：</label>
<input type="text" class="form-control zh-input" ng-model="nianZhongJiang"> <br>
<label class="ftwbold">年终奖和Tup纳税：</label>{{nianZhongJiangNaShui}}<br>
<label class="ftwbold">总计扣税：</label>{{totalTax}}<br>
<form ng-show="showType === 'singleInvest'">
<div class="form-group" ng-repeat="item in money track by $index">
<label class="ftwbold">{{$index + 1}}月：</label>
<label class="mgl10">gongzi</label>
<input type="text" class="form-control zh-input" ng-model="item.common">
<label class="mgl10">其它</label>
<input type="text" class="form-control zh-input" ng-model="item.other">
<label class="mgl10">WuXianYiJin</label>
<input type="text" class="form-control zh-input" ng-model="item.wuXianYiJin">
<label class="mgl10">本月附加扣除</label>
<input type="text" class="form-control zh-input" ng-model="item.fuJiaKouChu">
<label class="mgl10">benyue jiao shui：</label>{{item.tax}}
<label class="mgl10">累计JiaoShui：</label>{{item.leiJiJiaoShui}}
<label class="mgl10">累计YingNaShuiEDu：</label>{{item.leiJiYingNaShui}}
</div>
</form>
</div>
</body>
<script type="text/javascript" src="./lib/jquery.js"></script>
<script type="text/javascript" src="./lib/angular.js"></script>
<script type="text/javascript" src="./lib/bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
myApp.controller("myController", ["$scope", "$filter", function ($scope, $filter) {
$scope.qiZhengDian = 5000;
$scope.nianZhongJiang = 180000;
$scope.tup = 63000;
$scope.nianZhongJiangNaShui = 0;
$scope.$watch('nianZhongJiang', function (newVal) {
var shiJiTotal = parseInt($scope.nianZhongJiang, 10) + $scope.tup - $scope.money[4].other;
$scope.nianZhongJiangNaShui = shiJiTotal * getShuiLv(shiJiTotal) - getJiangJinSuSuanKouChu(shiJiTotal);
$scope.totalTax = $scope.nianZhongJiangNaShui + $scope.money[11].leiJiJiaoShui;
});
$scope.money = [];
var salaryModel;
for (var i = 0; i < 12; i++) {
salaryModel = {
common : 25300, // 基本工资
other: 0, // 其它收入
fuJiaKouChu: 4000, // 本月附加扣除数量
tax: 0, // 本月缴税数量
leiJiJiaoShui: 0, // 本年到当月累计缴税
leiJiYingNaShui: 0, // 本年到当月累计应缴税额度
wuXianYiJin: 2437, // 本月五险一金
};
$scope.money.push(salaryModel);
}
initMoney();
// 当年有特殊情况的可以在这初始化，避免刷新后要不停的输入
function initMoney() {
$scope.money[0].fuJiaKouChu = 3000;
$scope.money[1].fuJiaKouChu = 3000;
$scope.money[2].fuJiaKouChu = 3000;
$scope.money[1].other = 21262; // 上一年月末加班+专项激励3000
$scope.money[2].other = 500; // 总裁奖500
}
$scope.$watch('money', function (newVal) {
console.log('watch money');
for (var i = 0; i < 12; i++) {
var item = $scope.money[i];
item.dangYueYingNaShui = item.common + parseInt(item.other) - item.wuXianYiJin - $scope.qiZhengDian - item.fuJiaKouChu;
if (i === 0) {
item.leiJiYingNaShui = parseInt(item.dangYueYingNaShui, 10);
item.tax = parseInt(
item.leiJiYingNaShui
* getShuiLv(item.leiJiYingNaShui)
- getSuSuanKouChu(item.leiJiYingNaShui),
10
);
item.leiJiJiaoShui = item.tax
} else {
item.leiJiYingNaShui = parseInt(item.dangYueYingNaShui + $scope.money[i - 1].leiJiYingNaShui, 10);
item.tax = parseInt(
item.leiJiYingNaShui
* getShuiLv(item.leiJiYingNaShui)
- getSuSuanKouChu(item.leiJiYingNaShui)
- $scope.money[i - 1].leiJiJiaoShui,
10
);
item.leiJiJiaoShui = item.tax + $scope.money[i - 1].leiJiJiaoShui;
}
}
var shiJiTotal = parseInt($scope.nianZhongJiang, 10) + $scope.tup - $scope.money[4].other;
$scope.nianZhongJiangNaShui = shiJiTotal * getShuiLv(shiJiTotal) - getJiangJinSuSuanKouChu(shiJiTotal);
$scope.totalTax = $scope.nianZhongJiangNaShui + $scope.money[11].leiJiJiaoShui;
}, true);
function getShuiLv(leiJiYingNaShui) {
if (leiJiYingNaShui <= 36000) {
return 0.03;
} else if (leiJiYingNaShui > 36000 && leiJiYingNaShui <= 144000) {
return 0.1;
} else if (leiJiYingNaShui > 144000 && leiJiYingNaShui <= 300000) {
return 0.2;
} else if (leiJiYingNaShui > 300000 && leiJiYingNaShui <= 420000) {
return 0.25;
} else if (leiJiYingNaShui > 420000 && leiJiYingNaShui <= 660000) {
return 0.30;
} else if (leiJiYingNaShui > 660000 && leiJiYingNaShui <= 960000) {
return 0.35;
} else if (leiJiYingNaShui > 960000 && leiJiYingNaShui) {
return 0.45;
}
}
function getSuSuanKouChu(leiJiYingNaShui) {
if (leiJiYingNaShui <= 36000) {
return 0;
} else if (leiJiYingNaShui > 36000 && leiJiYingNaShui <= 144000) {
return 2520;
} else if (leiJiYingNaShui > 144000 && leiJiYingNaShui <= 300000) {
return 16920;
} else if (leiJiYingNaShui > 300000 && leiJiYingNaShui <= 420000) {
return 31920;
} else if (leiJiYingNaShui > 420000 && leiJiYingNaShui <= 660000) {
return 52920;
} else if (leiJiYingNaShui > 660000 && leiJiYingNaShui <= 960000) {
return 85920;
} else if (leiJiYingNaShui > 960000 && leiJiYingNaShui) {
return 181920;
}
}
function getJiangJinSuSuanKouChu(leiJiYingNaShui) {
if (leiJiYingNaShui <= 36000) {
return 0;
} else if (leiJiYingNaShui > 36000 && leiJiYingNaShui <= 144000) {
return 210;
} else if (leiJiYingNaShui > 144000 && leiJiYingNaShui <= 300000) {
return 1410;
} else if (leiJiYingNaShui > 300000 && leiJiYingNaShui <= 420000) {
return 2660;
} else if (leiJiYingNaShui > 420000 && leiJiYingNaShui <= 660000) {
return 4410;
} else if (leiJiYingNaShui > 660000 && leiJiYingNaShui <= 960000) {
return 7160;
} else if (leiJiYingNaShui > 960000 && leiJiYingNaShui) {
return 15160;
}
}
$scope.showType = 'singleInvest';
$scope.tabChange = function (type) {
$scope.showType = type;
}
}]);
</script>
</html>