关闭

ionic数字键盘

919人阅读 评论(0) 收藏 举报



    博客分类: 

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. }  

 代码在附件中

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:127403次
    • 积分:2036
    • 等级:
    • 排名:第19002名
    • 原创:0篇
    • 转载:504篇
    • 译文:0篇
    • 评论:6条
    文章存档