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 相关文章推荐
javascript中eval函数用法分析
Apr 25 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
详解VueJs前后端分离跨域问题
May 24 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
js实现无缝轮播图特效
May 09 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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/03/02 星际争霸
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python读取键盘输入的2种方法
2015/06/16 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
消防安全管理制度
2014/02/01 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
趣味运动会开幕词
2015/01/28 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis