<!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>