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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
Vue.js中的组件系统
2019/05/30 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
高中生自我评价个人范文
2013/11/09 职场文书
校园元旦活动总结
2014/07/09 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
交通事故协议书范文
2014/10/23 职场文书
安阳殷墟导游词
2015/02/10 职场文书
劳资员岗位职责
2015/02/13 职场文书
门卫管理制度范本
2015/08/05 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
python开发飞机大战游戏
2021/07/15 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript