基于AngularJS实现的工资计算器实例_AngularJS_js教程,jquery教程,ES5教程,ES6教程,typescript教程,ts教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

本文实例讲述了基于AngularJS实现的工资计算器。分享给大家供大家参考，具体如下：

先看界面：

其实在ng中最让人印象深刻的就是数据的双向绑定，在html中就完成了很多操作。大概用到的就是控制器视图服务等，没有分模块写控制器，代码如下：

001<html ng-app = "myApp">
002<head>
003  <title>工资计算器ng</title>
004  <script src= "angular.js"></script>
005</head>
006<body>
007  <div ng-controller = "MyController">
008    税前工资：<input ng-model="salary.shuiqiangonngzi"></input>
009    税后工资：<input ng-model="salary.shuihougongzi" ng-readonly = true></input><button ng-click = "calulate()">计算</button></br>
010    缴纳基数：社保<input ng-model="salary.shebao"></input> 公积金<input ng-model="salary.gongjijin"></input></br>
011           缴纳比例：       个人                单位 </br>
012    养老：<input ng-model="salary.gerenyanglaobili"></input>{{salary.gerenyanglao| number:2}}<input ng-model="salary.danweiyanglaobili"></input>{{salary.danweiyanglao| number:2}}</br>
013    医疗：<input ng-model="salary.gerenyiliaobili"></input>{{salary.gerenyiliao| number:2}}<input ng-model="salary.danweiyiliaobili"></input>{{salary.danweiyiliao| number:2}}</br>
014    失业：<input ng-model="salary.gerenshiyebili"></input>{{salary.gerenshiye| number:2}}<input ng-model="salary.danweishiyebili"></input>{{salary.danweishiye| number:2}}</br>
015    工伤：<input ng-model="salary.gerengongshangbili"></input>{{salary.gerengongshang| number:2}}<input ng-model="salary.danweigongshangbili"></input>{{salary.danweigongshang| number:2}}</br>
016    生育：<input ng-model="salary.gerenshengyubili"></input>{{salary.gerenshengyu| number:2}}<input ng-model="salary.danweishengyubili"></input>{{salary.danweishengyu| number:2}}</br>
017    公积金：<input ng-model="salary.gerengongjijinbili"></input>{{salary.gerengongjijin| number:2}}<input ng-model="salary.danweigongjijinbiili"></input>{{salary.danweigongjijin | number:2}}</br>
018    个人缴税：{{salary.gerenjiaoshui| number:2}}单位缴税：{{salary.danweijiaoshui | number:2}}</br>
019    个人所得税：{{salary.gerensuodeshui| number:2}}
020    <p>默认数据是北京市计算比例。</p>
021    <h5>{{theTime}}</h5>
022  </div>
023  <script type = "text/javascript">    
024    var app = angular.module("myApp", []);
025    app.controller('MyController',
026      function($scope,$interval,jisuan) {
027        $scope.salary= {gerenyanglaobili:0.08,gerenyanglao:0,danweiyanglaobili:0.2,danweiyanglao:0,
028                gerenyiliaobili:0.02,gerenyiliao:0,danweiyiliaobili:0.1,danweiyiliao:0,
029                gerenshiyebili:0.002,gerenshiye:0,danweishiyebili:0.01,danweishiye:0,
030                gerengongshangbili:0,gerengongshang:0,danweigongshangbili:0.008,danweigongshang:0,
031                gerenshengyubili:0,gerenshengyu:0,danweishengyubili:0.02,danweishengyu:0,
032                gerengongjijinbili:0.12,gerengongjijin:0,danweigongjijinbiili:0.12,danweigongjijin:0,
033                shuiqiangonngzi:10000,shuihougongzi:0,shebao:3000,gongjijin:3000,gerenjiaoshui:0,danweijiaoshui:0,gerensuodeshui:0
034                };
035        $scope.$watch('salary.shuiqiangonngzi', function(newVal, oldVal, scope) {
036          if(newVal!==oldVal)
037          {
038            jisuan.myFunc(scope);
039          }
040        });
041        $scope.$watch('salary.shebao', function(newVal, oldVal, scope) {
042          if(newVal!==oldVal)
043          {
044            jisuan.myFunc(scope);
045          }
046        });
047        $scope.$watch('salary.gongjijin', function(newVal, oldVal, scope) {
048          if(newVal!==oldVal)
049          {
050            jisuan.myFunc(scope);
051          }
052        });
053        jisuan.myFunc($scope);
054        $scope.calulate = function(){
055          jisuan.myFunc($scope);
056        };
057        $scope.theTime = new Date().toLocaleTimeString();
058        $interval(function () {
059          $scope.theTime = new Date().toLocaleTimeString();
060        }, 1000);
061    });
062    app.service('jisuan',function(){
063        this.myFunc = function(scope){
064          scope.salary.gerenyanglao = scope.salary.gerenyanglaobili * scope.salary.shebao;
065          scope.salary.danweiyanglao = scope.salary.danweiyanglaobili * scope.salary.shebao;
066          scope.salary.gerenyiliao = scope.salary.gerenyiliaobili * scope.salary.shebao;
067          scope.salary.danweiyiliao = scope.salary.danweiyiliaobili * scope.salary.shebao;
068          scope.salary.gerenshiye = scope.salary.gerenshiyebili * scope.salary.shebao;
069          scope.salary.danweishiye = scope.salary.danweishiyebili * scope.salary.shebao;
070          scope.salary.gerengongshang = scope.salary.gerengongshangbili * scope.salary.shebao;
071          scope.salary.danweigongshang = scope.salary.danweigongshangbili * scope.salary.shebao;
072          scope.salary.gerenshengyu = scope.salary.gerenshengyubili * scope.salary.shebao;
073          scope.salary.danweishengyu = scope.salary.danweishengyubili * scope.salary.shebao;
074          scope.salary.gerengongjijin = scope.salary.gerengongjijinbili * scope.salary.gongjijin;
075          scope.salary.danweigongjijin = scope.salary.danweigongjijinbiili * scope.salary.gongjijin;
076          scope.salary.gerenjiaoshui = scope.salary.gerenyanglao + scope.salary.gerenyiliao + scope.salary.gerenshiye + scope.salary.gerengongshang + scope.salary.gerenshengyu + scope.salary.gerengongjijin;
077          scope.salary.danweijiaoshui = scope.salary.danweiyanglao + scope.salary.danweiyiliao + scope.salary.danweishiye + scope.salary.danweigongshang + scope.salary.danweishengyu + scope.salary.danweigongjijin;
078          var shuiqianyue = scope.salary.shuiqiangonngzi-scope.salary.gerenjiaoshui-3500;
079          var gerensuodeshuijisuan =0;
080          if(shuiqianyue<0)
081          {
082            gerensuodeshuijisuan = 0;
083          }
084          else if(shuiqianyue<1500)
085          {
086            gerensuodeshuijisuan = shuiqianyue*0.03;
087          }
088          else if(shuiqianyue<4500)
089          {
090            gerensuodeshuijisuan = shuiqianyue*0.1-105;
091          }
092          else if(shuiqianyue<9000)
093          {
094            gerensuodeshuijisuan = shuiqianyue*0.2-555;
095          }
096          else if(shuiqianyue<35000)
097          {
098            gerensuodeshuijisuan = shuiqianyue*0.25-1005;
099          }
100          else if(shuiqianyue<55000)
101          {
102            gerensuodeshuijisuan = shuiqianyue*0.3-2775;
103          }
104          else if(shuiqianyue<80000)
105          {
106            gerensuodeshuijisuan = shuiqianyue*0.35-5505;
107          }
108          else
109          {
110            gerensuodeshuijisuan = shuiqianyue*0.45-13505;
111          }
112          scope.salary.gerensuodeshui = gerensuodeshuijisuan;
113          scope.salary.shuihougongzi = scope.salary.shuiqiangonngzi-scope.salary.gerenjiaoshui-scope.salary.gerensuodeshui;
114      }
115    });
116  </script>
117</body>
118</html>