Angular.js 实现数字转换汉字实例代码


Posted in Javascript onJuly 14, 2016

AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

下面通过本文给大家介绍Angular.js 实现数字转换汉字实例代码,具体代码如下所示:

// 1、实现输入数字输出对应汉字,要求使用angularjs,不准使用$watch函数,for循环;提示:ng-change指令
<div ng-app="myApp" ng-controller="changeCtrl"> // 定义一个app指令 定义一个controller 指令用于为你的应用添加控制器。在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。
数字: <input ng-model="number" ng-change="changeFunc(number)"> // ng-model 指令绑定了 HTML 表单元素到 scope 变量中。 如果 scope 中不存在变量, 将会创建它。 ng-change 事件在值的每次改变时触发
<h1>你输入了: {{result}}</h1> // 和ng-model数据绑定的值
</div>
<script>
var app = angular.module('myApp', []); // 新建一个模块,注意新的模块需要在 app.js 里面引入
app.controller('changeCtrl', function($scope) { // 建立controller方法 供html使用
$scope.number = ""; // 这里是input框中出现的值
$scope.result = ""; // 结果是h1中出现的值
var array=["零","一","二","三","四","五","六","七","八","九","十"];
$scope.changeFunc=function(number){ // 定义一个ng-change方法,当input内的值改变时出发(input内输入一个值,方法改变一次)
console.log("number=",number);
if(number != ''){ 
$scope.result = "";
var atr=number.replace(/(.)(?=[^$])/g,"$1,").split(",");//第一种 // 通过截取的形式每一个数字添加‘,'split把字符串变成数组 
atr.forEach(function(e){ // 循环数组atr
$scope.result += array[e];
});
/*for(var a in number){ //第二种 
console.log("number[a]=",number[a]);
var i = parseInt(number[a]);
$scope.result += array[i];
}*/
}
};
});
</script>

以上所述是小编给大家介绍的Angular.js 实现数字转换汉字实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 #Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 #Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 #Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 #Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 #Javascript
javascript运算符语法全面概述
Jul 14 #Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 #Javascript
You might like
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
认识并使用PHP超级全局变量
2010/01/26 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
基于php实现的验证码小程序
2016/12/13 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
JQuery球队选择实例
2015/05/18 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
python使用matplotlib绘制热图
2018/11/07 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
python如何进入交互模式
2020/07/06 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
部队领导证婚词
2014/01/12 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis