基于AngularJS实现的工资计算器实例
本文实例讲述了基于AngularJS实现的工资计算器。分享给大家供大家参考，具体如下：
先看界面：
其实在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>
       缴纳比例：       个人                单位 </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>
PS：这里再为大家推荐几款在线计算工具供大家参考使用：
在线投资理财计算器：
http://tools.jb51.net/jisuanqi/touzilicai_calc
在线存款计算器：
http://tools.jb51.net/jisuanqi/cunkuan_calc
科学计算器在线使用_高级计算器在线计算：
http://tools.jb51.net/jisuanqi/jsqkexue
在线计算器_标准计算器：
http://tools.jb51.net/jisuanqi/jsq
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
基于AngularJS实现iOS8自带的计算器
前言 首先创建angularjs的基本项目就不说了,最好是利用yeoman这个脚手架工具直接生成,如果没有该环境的,当然也可以通过自行下载angularjs的文件引入项目. 实例详解 main.js是项目的主要js文件,所有的js都写在这个文件中,初始化之后,该文件的js代码如下 angular .module('calculatorApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch'
-
AngularJs+Bootstrap实现漂亮的计算器
之前看到一个试题,要求用angularJs和Bootstrap写一个简单的计算器,通过百度,发现没有什么好的例子,所以呢,我就把自己写的一个例子发出来给大家.(大牛勿喷) HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <me
-
基于AngularJS实现的工资计算器实例
本文实例讲述了基于AngularJS实现的工资计算器.分享给大家供大家参考,具体如下: 先看界面: 其实在ng中最让人印象深刻的就是数据的双向绑定,在html中就完成了很多操作.大概用到的就是控制器视图服务等,没有分模块写控制器,代码如下: <html ng-app = "myApp"> <head> <title>工资计算器ng</title> <script src= "angular.js"><
-
PHP基于工厂模式实现的计算器实例
本文实例讲述了PHP基于工厂模式实现的计算器.分享给大家供大家参考.具体如下: abstract class Calculator { private $number1; private $number2; public $result; /** * @return the $number2 */ public function getNumber2() { return $this->number2; } /** * @param field_type $number2 */ public f
-
基于Angularjs实现分页功能
前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件 在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要基于angular direct
-
基于AngularJS的拖拽文件上传的实例代码
随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>
-
Python实现扣除个人税后的工资计算器示例
本文实例讲述了Python实现扣除个人税后的工资计算器.分享给大家供大家参考,具体如下: 正好处于找工作期间避免不了会跟单位谈论薪资的情况,当然所有人跟你谈的都是税前收入,税后应该实际收入有多少呢?今天就简单写一个个人税收收入计算器,仅仅是觉得很有意思而已,当然写的很简单,不同的单位五险一金的缴纳比例可能又是不一样的,可能还会有一些其他的薪资方面的限制,这里只是简单举例说明而已,具体的参数或者限制条件什么的都是可以在里面自行加入的,下面是最新的个税计算器税率表: 下面是五险一金的缴纳比例,(可能
-
PHP基于堆栈实现的高级计算器功能示例
本文实例讲述了PHP基于堆栈实现的高级计算器功能.分享给大家供大家参考,具体如下: 当我们得到一个字符串运算式该如何去得出它的运算结果呢? 这时候我们就能使用堆栈的算法很巧妙的解决这个问题. 思路是这样的:(我们利用php函数substr循环去截取这个字符串运算式,依次取出这个字符串的值[我们得从第一个字符开始截取],我们将开始截取位置设为一个循环增长的变量,初始化为[$index=0]),同时还需要创建两个栈,一个专门存放数字[$numStack],一个存放运算符[$operStack],我们
-
基于JSP实现一个简单计算器的方法
本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getSch
-
JS基于递归实现网页版计算器的方法分析
本文实例讲述了JS基于递归实现网页版计算器的方法.分享给大家供大家参考,具体如下: 递归实现网页版计算器可以简化代码,设计思路: 1.css+html实现计算器的外观,给每个button绑定number(z)事件,传入z的不同来区分触发事件的按钮. <style>放入head中 这个div放在body中,是计算器的html,number()通过传入不同的数字,区分触发按钮. <div class="bg"> <div id="txt"&
-
Python+tkinter使用80行代码实现一个计算器实例
本文主要探索的是使用Python+tkinter编程实现一个简单的计算器代码示例,具体如下. 闲话不说,直奔主题.建议大家跟着敲一遍代码,体会一下代码复用.字符串方法的运用和动态创建组件的妙处,然后在这个框架的基础上进行补充和发挥. 选择任何一款Python开发环境,创建一个程序文件,命名为tkinter_Calculator.pyw,然后编写下面的代码: 1)导入标准库re和tkinter,创建并简单设置应用主程序,在窗口顶部放置一个只读的文本框用来显示信息. 2)编写计算器上各种按钮的通用处
-
AngularJS中filter的使用实例详解
AngularJS中filter的使用实例详解 一.格式化数字为货币格式. <div>{{money|currency:"$"}}</div> <div>{{money|currency:"RMB"}}</div> script: app.controller("crl", function($scope, $filter) { $scope.money="4545"; });