ionic数字键盘

博客分类： 

ionic最近挺火，最近我也在玩这个，本例实现在用户点击输入框时弹出数字键盘。

效果如下

 

 

关键代码

Html代码  

1. <script id="templates/modal_number_keyboard.html" type="text/ng-template">  
2.       <ion-modal-view >  
3.         <ion-header-bar class="bar bar-header bar-positive">  
4.           <h1 class="title" ng-bind="currentNumber" ></h1>  
5.          </ion-header-bar>  
6.         <ion-content class="padding">  
7.             <div class="col col-offset-10">  
8.             <button class="button button-outline button-positive" ng-click="doInput(num.f);" >6</button>  
9.             <button class="button button-outline button-positive" ng-click="doInput(num.g);" >7</button>  
10.             <button class="button button-outline button-positive" ng-click="doInput(num.h);" >8</button>  
11.             <button class="button button-outline button-positive" ng-click="doInput(num.i);" >9</button>  
12.             </div>  
13.             <div class="col col-offset-10">  
14.             <button class="button button-outline button-positive" ng-click="doInput(num.b);" >2</button>  
15.             <button class="button button-outline button-positive" ng-click="doInput(num.c);" >3</button>  
16.             <button class="button button-outline button-positive" ng-click="doInput(num.d);" >4</button>  
17.             <button class="button button-outline button-positive" ng-click="doInput(num.e);" >5</button>  
18.             </div>  
19.             <div class="col col-offset-10">  
20.             <button class="button button-outline button-positive" ng-click="doInput(num.a);" >1</button>  
21.             <button class="button button-outline button-positive" ng-click="doInput(num.j);" >0</button>  
22.             <button class="button button-outline button-positive" ng-click="doInput(num.k);" >.</button>  
23.             <button class="button button-outline button-positive" ng-click="doInput(num.l);" >C</button>  
24.             </div>  
25.             <div class="col col-offset-10">  
26.             <button class="button button-outline button-positive" ng-click="modalNumberKeyboard.hide()" >取消</button>  
27.             <button class="button button-outline button-positive" ng-click="finishInput()">确定</button>  
28.             </div>  
29.          </ion-content>  
30.       </ion-modal-view>  
31.     </script>  

伦理片 http://www.dotdy.com/

Js代码  

1. $ionicModal.fromTemplateUrl("templates/modal_number_keyboard.html", {  
2.   scope: $scope  
3.  }).then(function(modal) {  
4.   $scope.modalNumberKeyboard = modal;  
5. });  
6.   
7.    $scope.currentNumber="";  
8. $scope.num={"a":1,"b":2,"c":3,"d":4,"e":5,"f":6,"g":7,"h":8,"i":9,"j":0,"k":".","l":"C"};  
9. $scope.doInput=function(n){  
10.    if(n=="C"){//清除键  
11.   $scope.currentNumber="";  
12.  }else if(n=="."){// .键  
13.   if( $scope.currentNumber!=""&&$scope.currentNumber.indexOf(".")==-1){  
14.    $scope.currentNumber=$scope.currentNumber+""+n;  
15.   }  
16.  }else if(n==0){//0键  
17.    if($scope.currentNumber==""||$scope.currentNumber!=0||$scope.currentNumber.indexOf(".")!=-1){  
18.     $scope.currentNumber=$scope.currentNumber+""+n;  
19. }  
20.  }else if(n!=0&&n!="."&&n!="C"){//1-9键  
21.       if($scope.currentNumber=="0"){  
22.     $scope.currentNumber=n;  
23. }else{  
24.        $scope.currentNumber=$scope.currentNumber+""+n;  
25.       }  
26.  }  
27. };  
28.    var currentInput;  
29.    $scope.showKeyBoard=function(t){  
30.       $scope.modalNumberKeyboard.show();  
31. currentInput=t;  
32.  };  
33. $scope.finishInput=function(){  
34.      eval("$scope."+currentInput+"=$scope.currentNumber==""?"0":$scope.currentNumber;");  
35.  $scope.modalNumberKeyboard.hide();  
36. }  

 代码在附件中