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 XML操作 封装类
Jul 01 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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中数组的三种排序方法分享
2012/05/07 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
ThinkPHP模型详解
2015/07/27 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python+Wordpress制作小说站
2017/04/14 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
简单了解python模块概念
2018/01/11 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python sorted方法和列表使用解析
2019/11/18 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
python中time.ctime()实例用法
2021/02/03 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
请解释virtual关键字的含义
2015/06/17 面试题
青年志愿者先进事迹
2014/05/06 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers