介绍
这篇文章主要介绍了如何基于AngularJS实现工资计算器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
js有什么特点
1, js属于一种解释性脚本语言;2,在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3,js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4,js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5,基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。
具体如下:
先看界面:
其实在ng中最让人印象深刻的就是数据的双向绑定,在html中就完成了很多操作。大概用到的就是控制器视图服务等,没有分模块写控制器,代码如下:
& lt; html ng-app =,“myApp"比; & lt; head> & lt;才能title>工资计算器ng & lt;才能script src=https://www.yisu.com/zixun/" angular.js "> 脚本> >头 <身体>税前工资:<输入ng-model=" salary.shuiqiangonngzi "> 输入> 税后工资:<输入ng-model="工资。shuihougongzi " ng-readonly=true> 输入> <按钮ng-click=癱alulate() ">计算按钮> 缴纳基数:社保<输入ng-model="工资。shebao "> 输入>公积金<输入ng-model=" salary.gongjijin "> 输入>        缴纳比例:       个人                单位 输入ng-model养老:<=" salary.gerenyanglaobili "> 输入>{{薪水。gerenyanglao |人数:2}}<输入ng-model=" salary.danweiyanglaobili "> 输入>{{薪水。danweiyanglao |人数:2}} 输入ng-model医疗:<=" salary.gerenyiliaobili "> 输入>{{薪水。gerenyiliao |人数:2}}<输入ng-model=" salary.danweiyiliaobili "> 输入>{{薪水。danweiyiliao |人数:2}} 输入ng-model失业:<=" salary.gerenshiyebili "> 输入>{{薪水。gerenshiye |人数:2}}<输入ng-model=" salary.danweishiyebili "> 输入>{{薪水。danweishiye |人数:2}} 工伤:<输入ng-model=" salary.gerengongshangbili "> 输入>{{薪水。gerengongshang |人数:2}}<输入ng-model=" salary.danweigongshangbili "> 输入>{{薪水。danweigongshang |人数:2}} 生育:<输入ng-model=" salary.gerenshengyubili "> 输入>{{薪水。gerenshengyu |人数:2}}<输入ng-model=" salary.danweishengyubili "> 输入>{{薪水。danweishengyu |人数:2}} 公积金:<输入ng-model=" salary.gerengongjijinbili "> 输入>{{薪水。gerengongjijin |人数:2}}<输入ng-model=" salary.danweigongjijinbiili "> 输入>{{薪水。danweigongjijin |人数:2}} 个人缴的税:{{薪水。gerenjiaoshui |人数:2}}单位缴税:{{薪水。danweijiaoshui |人数:2}} 个人所得税:{{薪水。gerensuodeshui |人数:2}}默认数据是北京市计算比例。
<编辑>{{卡脖子}}编辑>