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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
Syphon 使用方法
2021/03/03 冲泡冲煮
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
document.compatMode介绍
2009/05/21 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python基本语法练习实例
2017/09/19 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python中的print()输出
2019/04/12 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
法务专员岗位职责
2014/01/02 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
毕业实习感受与体会
2015/05/26 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
原生JS中应该禁止出现的写法
2021/05/05 Javascript
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
纯html+css实现打字效果
2021/08/02 HTML / CSS
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python