Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼
AngularJS 簡(jiǎn)介
AngularJS 是一個(gè) JavaScript 框架。它可通過(guò) <script> 標(biāo)簽添加到 HTML 頁(yè)面。
AngularJS 通過(guò) 指令 擴(kuò)展了 HTML,且通過(guò) 表達(dá)式 綁定數(shù)據(jù)到 HTML。
下面通過(guò)本文給大家介紹Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼,具體代碼如下所示:
// 1、實(shí)現(xiàn)輸入數(shù)字輸出對(duì)應(yīng)漢字,要求使用angularjs,不準(zhǔn)使用$watch函數(shù),for循環(huán);提示:ng-change指令
<div ng-app="myApp" ng-controller="changeCtrl"> // 定義一個(gè)app指令 定義一個(gè)controller 指令用于為你的應(yīng)用添加控制器。在控制器中,你可以編寫代碼,制作函數(shù)和變量,并使用 scope 對(duì)象來(lái)訪問(wèn)。
數(shù)字: <input ng-model="number" ng-change="changeFunc(number)"> // ng-model 指令綁定了 HTML 表單元素到 scope 變量中。 如果 scope 中不存在變量, 將會(huì)創(chuàng)建它。 ng-change 事件在值的每次改變時(shí)觸發(fā)
<h1>你輸入了: {{result}}</h1> // 和ng-model數(shù)據(jù)綁定的值
</div>
<script>
var app = angular.module('myApp', []); // 新建一個(gè)模塊,注意新的模塊需要在 app.js 里面引入
app.controller('changeCtrl', function($scope) { // 建立controller方法 供html使用
$scope.number = ""; // 這里是input框中出現(xiàn)的值
$scope.result = ""; // 結(jié)果是h1中出現(xiàn)的值
var array=["零","一","二","三","四","五","六","七","八","九","十"];
$scope.changeFunc=function(number){ // 定義一個(gè)ng-change方法,當(dāng)input內(nèi)的值改變時(shí)出發(fā)(input內(nèi)輸入一個(gè)值,方法改變一次)
console.log("number=",number);
if(number != ''){
$scope.result = "";
var atr=number.replace(/(.)(?=[^$])/g,"$1,").split(",");//第一種 // 通過(guò)截取的形式每一個(gè)數(shù)字添加‘,'split把字符串變成數(shù)組
atr.forEach(function(e){ // 循環(huán)數(shù)組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 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 詳解AngularJS中的filter過(guò)濾器用法
- AngularJS的內(nèi)置過(guò)濾器詳解
- 詳解AngularJS中自定義過(guò)濾器
- AngularJS中的過(guò)濾器使用詳解
- 使用AngularJS創(chuàng)建自定義的過(guò)濾器的方法
- AngularJS過(guò)濾器filter用法總結(jié)
- 詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
- AngularJS實(shí)現(xiàn)用戶登錄狀態(tài)判斷的方法(Model添加攔截過(guò)濾器,路由增加限制)
- AngularJS 過(guò)濾器(自帶和自建)詳解
- Angularjs 雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類型的問(wèn)題
- Angular使用過(guò)濾器uppercase/lowercase實(shí)現(xiàn)字母大小寫轉(zhuǎn)換功能示例
相關(guān)文章
AngularJs定時(shí)器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時(shí)器$interval 和 $timeout詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
AngularJS中實(shí)現(xiàn)動(dòng)畫(huà)效果的方法
本文主要介紹AngularJS 動(dòng)畫(huà),這里對(duì)動(dòng)畫(huà)的資料詳細(xì)介紹并附有效果圖和代碼實(shí)例,有需要的小伙伴參考下2016-07-07
AngularJS基礎(chǔ) ng-dblclick 指令用法
本文主要介紹AngularJS ng-dblclick 指令,這里對(duì)ng-dblclick基礎(chǔ)資料整理并詳細(xì)介紹,簡(jiǎn)單的代碼實(shí)例和實(shí)現(xiàn)效果,希望能幫助學(xué)習(xí)AngularJS的朋友2016-08-08
使用AngularJS實(shí)現(xiàn)可伸縮的頁(yè)面切換的方法
這篇文章主要介紹了使用AngularJS實(shí)現(xiàn)可伸縮的頁(yè)面切換的方法,AngularJS是一款熱門的JavaScript庫(kù),需要的朋友可以參考下2015-06-06
淺談angularjs $http提交數(shù)據(jù)探索
這篇文章主要介紹了淺談angularjs $http提交數(shù)據(jù)探索,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-01-01
詳解Angular2表單-模板驅(qū)動(dòng)的表單(Template-Driven Forms)
本篇文章主要介紹了詳解Angular2表單-模板驅(qū)動(dòng)的表單(Template-Driven Forms),具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
Angular4實(shí)現(xiàn)鼠標(biāo)懸停3d傾斜效果
這篇文章主要介紹了Angular4實(shí)現(xiàn)鼠標(biāo)懸停3d傾斜效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-10-10
angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12

