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實現字母大小寫轉換功能示例
相關文章
Angular使用過濾器uppercase/lowercase實現字母大小寫轉換功能示例
這篇文章主要介紹了Angular使用過濾器uppercase/lowercase實現字母大小寫轉換功能,涉及AngularJS過濾器針對字符串轉換的簡單使用技巧,需要的朋友可以參考下2018-03-03使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關知識,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07詳解什么是@ngrx/store開發(fā)包中的MemoizedSelector
這篇文章主要為大家介紹了@ngrx/store開發(fā)包中的MemoizedSelector使用分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07angularjs在ng-repeat中使用ng-model遇到的問題
本文給大家分享了一個個人在使用angular過程中遇到的在ng-repeat中使用ng-model的問題,并附上簡單的解決辦法,希望能對大家學習angular有所幫助2016-01-01