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获取一个范围内日期的方法
Apr 24 Javascript
jquery实现倒计时功能
Dec 28 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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的Socket网络编程入门指引
2015/08/11 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
农民工创业典型事迹
2014/01/25 职场文书
秋季运动会开幕词
2015/01/28 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python