A payroll calculator based on the ANGULARJS

First look at the interface:

In fact, the most impressive thing about Ng is the two-way binding of data, which has done a lot of work in HTML. Probably used is the Controller view service, etc., no sub-module write controller, the code is as follows:

Pre-tax salary:<input ng-model= "Salary.shuiqiangonngzi" ></input> after-tax salary: <input ng-model= "Salary.shuihougongzi" Ng-re Adonly =true></input><button Ng-click = "calulate ()" > Calculation </button></br> Payment Base: Social Security <input ng-model= "Sal Ary.shebao "></input> Provident Fund <input ng-model=" Salary.gongjijin "></input></br> &nbsp&amp ; nbsp&nbsp&nbsp&nbsp&nbsp&nbsp pay ratio: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Personal &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &AMP;NBSP&AMP;NBSP&AMP;NBSP&AMP;NBSP&AMP;NBSP units </br>Pension:<input ng-model= "Salary.gerenyanglaobili" ></input>{{salary.gerenyanglao| number:2}}<input Ng-model = "Salary.danweiyanglaobili" ></input>{{salary.danweiyanglao| number:2}}</br> Medical: <input ng-model= "Salary.gerenyiliaobili" ></input>{{salary.gerenyiliao| number:2}}<input ng-model= " Salary.danweiyiliaobili "></input>{{salary.danweiyiliao| number:2}}</br> unemployed: <input ng-model=" Salary.gerenshiyebili "></input>{{salary.gerenshiye| number:2}}<input ng-model=" Salary.danweishiyebili "></input>{{salary.danweishiye| number:2}}</br> injury: <input ng-model=" Salary.gerengongshangbili "></input>{{salary.gerengongshang| number:2}}<input ng-model=" Salary.danweigongshangbili "></input>{{salary.danweigongshang| number:2}}</br> Birth: <input Ng-model= "Salary.gerenshengyubili" ></input>{{salary.gerenshengyu| number:2}}<input ng-model= " Salary.danweishengyubili "></input>{{salary.danweishengyu| number:2}}</br> Provident Fund: <input ng-model= "Salary.gerengongjijinbili" > </input>{{salary.gerengongjijin| number:2}}<input ng-model= "Salary.danweigongjijinbiili" ></input >{{salary.danweigongjijin | number:2}}</br> Personal tax: {{salary.gerenjiaoshui| number:2}} unit Tax: {{Salary.danweiji Aoshui | Number:2}}</br> Personal Income Tax: {{salary.gerensuodeshui| number:2}}        <p> default data is the Beijing calculation ratio. </p> varApp = Angular.module ("myApp", []); App.controller (' Mycontroller ',            function($scope, $interval, Jisuan) {$scope. Salary= {gerenyanglaobili:0.08,gerenyanglao:0,danweiyanglaobili:0.2,danweiyanglao:0, Gerenyiliaobili:0.02,gerenyiliao:0,danweiyiliaobili:0.1,danweiyiliao:0, Gerenshiyebili:0.002,gerenshiye:0,danweishiyebili:0.01,danweishiye:0, Gerengongshangbili:0,gerengongshang:0,danweigongshangbili:0.008,danweigongshang:0, Gerenshengyubili:0,gerenshengyu:0,danweishengyubili:0.02,danweishengyu:0, Gerengongjijinbili:0.12,gerengongjijin:0,danweigongjijinbiili:0.12,danweigongjijin:0, Shuiqiangonngzi:10000,shuihougongzi:0,shebao:3000,gongjijin:3000,gerenjiaoshui:0,danweijiaoshui:0,gerensuodeshui:0                               }; $scope. $watch (' Salary.shuiqiangonngzi ',function(newval, Oldval, scope) {if(newval!==oldval)                    {Jisuan.myfunc (scope);                }                }); $scope. $watch (' Salary.shebao ',function(newval, Oldval, scope) {if(newval!==oldval)                    {Jisuan.myfunc (scope);                }                }); $scope. $watch (' Salary.gongjijin ',function(newval, Oldval, scope) {if(newval!==oldval)                    {Jisuan.myfunc (scope);                }                });                Jisuan.myfunc ($scope); $scope. Calulate=function() {jisuan.myfunc ($scope);                            }; $scope. Thetime=NewDate (). tolocaletimestring (); $interval (function() {$scope. Thetime=NewDate (). tolocaletimestring (); }, 1000);                        }); App.service (' Jisuan ',function(){                 This. MyFunc =function(scope) {Scope.salary.gerenyanglao= Scope.salary.gerenyanglaobili *Scope.salary.shebao; Scope.salary.danweiyanglao= Scope.salary.danweiyanglaobili *Scope.salary.shebao; Scope.salary.gerenyiliao= Scope.salary.gerenyiliaobili *Scope.salary.shebao; Scope.salary.danweiyiliao= Scope.salary.danweiyiliaobili *Scope.salary.shebao; Scope.salary.gerenshiye= Scope.salary.gerenshiyebili *Scope.salary.shebao; Scope.salary.danweishiye= Scope.salary.danweishiyebili *Scope.salary.shebao; Scope.salary.gerengongshang= Scope.salary.gerengongshangbili *Scope.salary.shebao; Scope.salary.danweigongshang= Scope.salary.danweigongshangbili *Scope.salary.shebao; Scope.salary.gerenshengyu= Scope.salary.gerenshengyubili *Scope.salary.shebao; Scope.salary.danweishengyu= Scope.salary.danweishengyubili *Scope.salary.shebao; Scope.salary.gerengongjijin= Scope.salary.gerengongjijinbili *Scope.salary.gongjijin; Scope.salary.danweigongjijin= Scope.salary.danweigongjijinbiili *Scope.salary.gongjijin; Scope.salary.gerenjiaoshui= Scope.salary.gerenyanglao + Scope.salary.gerenyiliao + Scope.salary.gerenshiye + Scope.salary.gerengongshang + Scope.salary.gerenshengyu +Scope.salary.gerengongjijin; Scope.salary.danweijiaoshui= Scope.salary.danweiyanglao + Scope.salary.danweiyiliao + Scope.salary.danweishiye + Scope.salary.danweigongshang + Scope.salary.danweishengyu +Scope.salary.danweigongjijin; varShuiqianyue = scope.salary.shuiqiangonngzi-scope.salary.gerenjiaoshui-3500; varGerensuodeshuijisuan =0; if(shuiqianyue<0) {Gerensuodeshuijisuan= 0; }                    Else if(shuiqianyue<1500) {Gerensuodeshuijisuan= shuiqianyue*0.03; }                    Else if(shuiqianyue<4500) {Gerensuodeshuijisuan= shuiqianyue*0.1-105; }                    Else if(shuiqianyue<9000) {Gerensuodeshuijisuan= shuiqianyue*0.2-555; }                    Else if(shuiqianyue<35000) {Gerensuodeshuijisuan= shuiqianyue*0.25-1005; }                    Else if(shuiqianyue<55000) {Gerensuodeshuijisuan= shuiqianyue*0.3-2775; }                    Else if(shuiqianyue<80000) {Gerensuodeshuijisuan= shuiqianyue*0.35-5505; }                    Else{Gerensuodeshuijisuan= shuiqianyue*0.45-13505; } Scope.salary.gerensuodeshui=Gerensuodeshuijisuan; Scope.salary.shuihougongzi= scope.salary.shuiqiangonngzi-scope.salary.gerenjiaoshui-Scope.salary.gerensuodeshui;            }        }); </script></body>
A payroll calculator based on the ANGULARJS