先看界面：

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

<html ng-app = "myApp">
<head><title>工资计算器ng</title><script src= "angular.js"></script>
</head>
<body><div ng-controller = "MyController">税前工资：<input ng-model="salary.shuiqiangonngzi"></input>税后工资：<input ng-model="salary.shuihougongzi" ng-readonly = true></input><button ng-click = "calulate()">计算</button></br>缴纳基数：社保<input ng-model="salary.shebao"></input>  公积金<input ng-model="salary.gongjijin"></input></br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp缴纳比例：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp个人&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp单位 </br>
        养老：<input ng-model="salary.gerenyanglaobili"></input>{{salary.gerenyanglao| number:2}}<input ng-model="salary.danweiyanglaobili"></input>{{salary.danweiyanglao| number:2}}</br>医疗：<input ng-model="salary.gerenyiliaobili"></input>{{salary.gerenyiliao| number:2}}<input ng-model="salary.danweiyiliaobili"></input>{{salary.danweiyiliao| number:2}}</br>失业：<input ng-model="salary.gerenshiyebili"></input>{{salary.gerenshiye| number:2}}<input ng-model="salary.danweishiyebili"></input>{{salary.danweishiye| number:2}}</br>工伤：<input ng-model="salary.gerengongshangbili"></input>{{salary.gerengongshang| number:2}}<input ng-model="salary.danweigongshangbili"></input>{{salary.danweigongshang| number:2}}</br>生育：<input ng-model="salary.gerenshengyubili"></input>{{salary.gerenshengyu| number:2}}<input ng-model="salary.danweishengyubili"></input>{{salary.danweishengyu| number:2}}</br>公积金：<input ng-model="salary.gerengongjijinbili"></input>{{salary.gerengongjijin| number:2}}<input ng-model="salary.danweigongjijinbiili"></input>{{salary.danweigongjijin | number:2}}</br>个人缴税：{{salary.gerenjiaoshui| number:2}}单位缴税：{{salary.danweijiaoshui | number:2}}</br>个人所得税：{{salary.gerensuodeshui| number:2}}<p>默认数据是北京市计算比例。</p><h5>{{theTime}}</h5></div><script type = "text/javascript">        var app = 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 = new Date().toLocaleTimeString();$interval(function () {$scope.theTime = new Date().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;var shuiqianyue = scope.salary.shuiqiangonngzi-scope.salary.gerenjiaoshui-3500;var gerensuodeshuijisuan =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>
</html>

转载于:https://www.cnblogs.com/liaocheng/p/5271647.html

一个基于angularJS的工资计算器相关推荐

  1. AVR单片机计算器C语言源程序,一个基于AVR单片机的计算器程序.doc

    一个基于AVR单片机的计算器程序 #include #include//延时函数的头文件 #include // 中断函数的头文件 #define uint unsigned int #define ...

  2. c语言编程实现二进制计算器,本程序是用纯C语言编的一个基于命令行的四则运算计算器。主要用于计算四则运算表达式的值，同时可以实现四...

    本程序是用纯C语言编的一个基于命令行的四则运算计算器.主要用于计算四则运算表达式的值,同时可以实现四 2016-08-22 0 0 0 暂无评分 其他 1 积分下载 如何获取积分? 本程序是用纯C语言 ...

  3. 基于angularJS和requireJS的前端架构

    1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...

  4. python制作工资计算器-Python计算个人所得税

    不知道大家有没有细心观察自己工资条上个人所得税呢?很多人都觉得有专门的个人所得税计算器,不用再去复查,但是有的黑心的公司专门利用这种心理,偶尔增加你的扣税额,为了方便大家核查自己的个人所得税,我用Py ...

  5. python制作工资计算器-Python制作个税计算器

    不知道大家有没有细心观察自己工资条上个人所得税呢?很多人都觉得有专门的个人所得税计算器,不用再去复查,但是有的黑心的公司专门利用这种心理,偶尔增加你的扣税额,为了方便大家核查自己的个人所得税,我用Py ...

  6. python制作工资计算器-Python实现扣除个人税后的工资计算器示例

    本文实例讲述了Python实现扣除个人税后的工资计算器.分享给大家供大家参考,具体如下: 正好处于找工作期间避免不了会跟单位谈论薪资的情况,当然所有人跟你谈的都是税前收入,税后应该实际收入有多少呢?今 ...

  7. python计算每月工资-Python实现扣除个人税后的工资计算器示例

    本文实例讲述了Python实现扣除个人税后的工资计算器.分享给大家供大家参考,具体如下: 正好处于找工作期间避免不了会跟单位谈论薪资的情况,当然所有人跟你谈的都是税前收入,税后应该实际收入有多少呢?今 ...

  8. 简单计算器的设计java_(基于java的简易计算器的设计.doc

    (基于java的简易计算器的设计 基于java的简易计算器的设计 摘要 自从java语言诞生以来,java语言就以不可抵挡的趋势很快成为国际上广泛流行的面向对象编程语言,它既具有高级语言的特点,又少了 ...

  9. 基于JavaScript实现网页计算器

    基于JavaScript的网页计算器 基于HTML.CSS.JavaScript制作的网页计算器,其中可以实现加.减.乘.除.取整.求余.阶乘.科学计数等功能 界面如下: 代码如下: 有兴趣的朋友欢迎 ...

最新文章

  1. 自定义View合辑（8）-跳跃的小球（贝塞尔曲线）
  2. Latex 参考文献，或者最后一页平衡
  3. 海思3515，交叉编译opencv2.4.9
  4. jvm简单笔记(3)
  5. Visual C#使用DirectX实现视频播放
  6. asp 取数据 计算_地学数据 | 地理空间数据获取方式汇总
  7. asp.net生成高质量缩略图通用函数(c#代码),支持多种生成方式
  8. 【theano-windows】学习笔记七——logistic回归
  9. android中的多渠道打包,Android 多渠道打包简析
  10. 源码目录变了，修改Eclipse配置：工作空间，JDK
  11. 华为交换机学习指南基于端口划分VLAN的四种方案
  12. 力荐 | 台大林轩田《机器学习基石》资源汇总
  13. 屏蔽广告（广告终结者）-- CSDN 第一步
  14. linux 一键网克,MaxDos8下载一键Ghost|迈思工作室MaxDos工具箱下载 v8.0 官方版_最火软件站...
  15. 关于Dr.Com3.73多人上网的破解（一）
  16. Mac安装CentOS8.3时出现，安装源设置基础软件仓库时出错
  17. Win7下面安装VS2003
  18. 微信公众号(订阅号)文章阅读数监控V0.1
  19. 使用jol查看对象内部布局
  20. 基于微服务的司机注册与实名认证（活体检测）

热门文章

  1. Payoneer取人民币全过程(ATM)
  2. w10更新以后DNS服务器未响应,图文详解win10系统dns服务器未响应的措施
  3. 科技云报道：“Sky Computing”会是云计算未来的新方向吗？
  4. 阿里P5的测试开发工程师，都有哪些要求？
  5. 将视频文件旋转90°的方法
  6. c语言编程出彩色告白,C语言告白代码，一闪一闪亮晶晶~
  7. 同步四进制加法计数器(JK)
  8. Moment Generating Function
  9. Bert：Pre-training of Deep Bidirectional Transformers forLanguage Understanding
  10. java用ssm框架开发的空气质量检测系统源码网站实战项目