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 小型打飞机游戏实现原理说明
Oct 28 Javascript
jquery 插件学习(三)
Aug 06 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
js简单倒计时实现代码
Apr 30 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
react国际化react-intl的使用
May 06 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
Python制作exe文件简单流程
2019/01/24 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
np.random.seed() 的使用详解
2020/01/14 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
yy婚礼主持词
2014/03/14 职场文书
工作求职自荐信
2014/06/13 职场文书
项目合作意向书模板
2014/07/29 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
微信小程序实现录音Record功能
2021/05/09 Javascript
Vue和Flask通信的实现
2021/05/19 Vue.js
python 详解turtle画爱心代码
2022/02/15 Python