Angular.js 實現數字轉換漢字實例代碼
更新時間:2016年07月14日 10:41:09 作者:_破破
這篇文章主要介紹了Angular.js 實現數字轉換漢字實例代碼的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
AngularJS 簡介
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML,且通過 表達式 綁定數據到 HTML。
下面通過本文給大家介紹Angular.js 實現數字轉換漢字實例代碼,具體代碼如下所示:
// 1、實現輸入數字輸出對應漢字,要求使用angularjs,不準使用$watch函數,for循環(huán);提示: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 中不存在變量, 將會創(chuàng)建它。 ng-change 事件在值的每次改變時觸發(fā)
<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內的值改變時出發(fā)(input內輸入一個值,方法改變一次)
console.log("number=",number);
if(number != ''){
$scope.result = "";
var atr=number.replace(/(.)(?=[^$])/g,"$1,").split(",");//第一種 // 通過截取的形式每一個數字添加‘,'split把字符串變成數組
atr.forEach(function(e){ // 循環(huán)數組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 實現數字轉換漢字實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
您可能感興趣的文章:
- 詳解AngularJS中的filter過濾器用法
- AngularJS的內置過濾器詳解
- 詳解AngularJS中自定義過濾器
- AngularJS中的過濾器使用詳解
- 使用AngularJS創(chuàng)建自定義的過濾器的方法
- AngularJS過濾器filter用法總結
- 詳解AngularJS中$filter過濾器使用(自定義過濾器)
- AngularJS實現用戶登錄狀態(tài)判斷的方法(Model添加攔截過濾器,路由增加限制)
- AngularJS 過濾器(自帶和自建)詳解
- Angularjs 雙向綁定時字符串的轉換成數字類型的問題
- Angular使用過濾器uppercase/lowercase實現字母大小寫轉換功能示例
相關文章
AngularJs定時器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時器$interval 和 $timeout詳解,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
詳解Angular2表單-模板驅動的表單(Template-Driven Forms)
本篇文章主要介紹了詳解Angular2表單-模板驅動的表單(Template-Driven Forms),具有一定的參考價值,有興趣的可以了解一下2017-08-08

