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 相关文章推荐
js三种排序算法分享
Aug 16 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
浅谈Webpack打包优化技巧
Jun 12 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
详解Java中String JSONObject JSONArray List转换
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多线程异步请求的3种方法
2014/01/17 PHP
php读取3389的脚本
2014/05/06 PHP
php操作mongoDB实例分析
2014/12/29 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
javascript 写类方式之十
2009/07/05 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
Vue基础配置讲解
2019/11/29 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
PyQt5实现下载进度条效果
2018/04/19 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python实现kmp算法的实例代码
2019/04/03 Python
python dumps和loads区别详解
2020/02/04 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
餐厅考勤管理制度
2014/01/28 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
信用卡收入证明范本
2015/06/12 职场文书
礼貌问候语大全
2015/11/10 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript