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实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
vue的webcamjs集成方式
Nov 16 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正则验证Email的方法
2015/06/15 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
2014年会演讲稿范文
2014/01/06 职场文书
司法所长先进事迹
2014/06/02 职场文书
走近毛泽东观后感
2015/06/04 职场文书
2015年村级财务管理制度
2015/08/04 职场文书