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 相关文章推荐
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 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
php GD绘制24小时柱状图
2008/06/28 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php框架知识点的整理和补充
2021/03/01 PHP
[JS]点出统计器
2020/10/11 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
详解js类型判断
2018/05/22 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Python:slice与indices的用法
2019/11/25 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
党支部书记先进事迹
2014/01/17 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
基于Redis延迟队列的实现代码
2021/05/13 Redis
openstack中的rpc远程调用的方法
2021/07/09 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis