Angular.js 實現(xiàn)數(shù)字轉(zhuǎn)換漢字實例代碼
AngularJS 簡介
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML,且通過 表達式 綁定數(shù)據(jù)到 HTML。
下面通過本文給大家介紹Angular.js 實現(xiàn)數(shù)字轉(zhuǎn)換漢字實例代碼,具體代碼如下所示:
// 1、實現(xiàn)輸入數(shù)字輸出對應(yīng)漢字,要求使用angularjs,不準使用$watch函數(shù),for循環(huán);提示:ng-change指令
<div ng-app="myApp" ng-controller="changeCtrl"> // 定義一個app指令 定義一個controller 指令用于為你的應(yīng)用添加控制器。在控制器中,你可以編寫代碼,制作函數(shù)和變量,并使用 scope 對象來訪問。
數(shù)字: <input ng-model="number" ng-change="changeFunc(number)"> // ng-model 指令綁定了 HTML 表單元素到 scope 變量中。 如果 scope 中不存在變量, 將會創(chuàng)建它。 ng-change 事件在值的每次改變時觸發(fā)
<h1>你輸入了: {{result}}</h1> // 和ng-model數(shù)據(jù)綁定的值
</div>
<script>
var app = angular.module('myApp', []); // 新建一個模塊,注意新的模塊需要在 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){ // 定義一個ng-change方法,當input內(nèi)的值改變時出發(fā)(input內(nèi)輸入一個值,方法改變一次)
console.log("number=",number);
if(number != ''){
$scope.result = "";
var atr=number.replace(/(.)(?=[^$])/g,"$1,").split(",");//第一種 // 通過截取的形式每一個數(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 實現(xiàn)數(shù)字轉(zhuǎn)換漢字實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 詳解AngularJS中的filter過濾器用法
- AngularJS的內(nèi)置過濾器詳解
- 詳解AngularJS中自定義過濾器
- AngularJS中的過濾器使用詳解
- 使用AngularJS創(chuàng)建自定義的過濾器的方法
- AngularJS過濾器filter用法總結(jié)
- 詳解AngularJS中$filter過濾器使用(自定義過濾器)
- AngularJS實現(xiàn)用戶登錄狀態(tài)判斷的方法(Model添加攔截過濾器,路由增加限制)
- AngularJS 過濾器(自帶和自建)詳解
- Angularjs 雙向綁定時字符串的轉(zhuǎn)換成數(shù)字類型的問題
- Angular使用過濾器uppercase/lowercase實現(xiàn)字母大小寫轉(zhuǎn)換功能示例
相關(guān)文章
在AngularJS應(yīng)用中實現(xiàn)一些動畫效果的代碼
這篇文章主要介紹了在AngularJS應(yīng)用中實現(xiàn)一些動畫效果的代碼,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
Angular使用過濾器uppercase/lowercase實現(xiàn)字母大小寫轉(zhuǎn)換功能示例
這篇文章主要介紹了Angular使用過濾器uppercase/lowercase實現(xiàn)字母大小寫轉(zhuǎn)換功能,涉及AngularJS過濾器針對字符串轉(zhuǎn)換的簡單使用技巧,需要的朋友可以參考下2018-03-03
使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關(guān)知識,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
詳解什么是@ngrx/store開發(fā)包中的MemoizedSelector
這篇文章主要為大家介紹了@ngrx/store開發(fā)包中的MemoizedSelector使用分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
angularjs在ng-repeat中使用ng-model遇到的問題
本文給大家分享了一個個人在使用angular過程中遇到的在ng-repeat中使用ng-model的問題,并附上簡單的解決辦法,希望能對大家學(xué)習(xí)angular有所幫助2016-01-01
詳解使用angular框架離線你的應(yīng)用(pwa指南)
這篇文章主要介紹了詳解使用angular框架離線你的應(yīng)用(pwa指南),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01

