ionic数字键盘

博客分类： 

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

效果如下

 

 

关键代码

 <script id="templates/modal_number_keyboard.html" type="text/ng-template">
       <ion-modal-view >
         <ion-header-bar class="bar bar-header bar-positive">
           <h1 class="title" ng-bind="currentNumber" >h1>
          ion-header-bar>
         <ion-content class="padding">
             <div class="col col-offset-10">
             <button class="button button-outline button-positive" ng-click="doInput(num.f);" >6button>
             <button class="button button-outline button-positive" ng-click="doInput(num.g);" >7button>
             <button class="button button-outline button-positive" ng-click="doInput(num.h);" >8button>
             <button class="button button-outline button-positive" ng-click="doInput(num.i);" >9button>
             div>
             <div class="col col-offset-10">
             <button class="button button-outline button-positive" ng-click="doInput(num.b);" >2button>
             <button class="button button-outline button-positive" ng-click="doInput(num.c);" >3button>
             <button class="button button-outline button-positive" ng-click="doInput(num.d);" >4button>
             <button class="button button-outline button-positive" ng-click="doInput(num.e);" >5button>
             div>
             <div class="col col-offset-10">
             <button class="button button-outline button-positive" ng-click="doInput(num.a);" >1button>
             <button class="button button-outline button-positive" ng-click="doInput(num.j);" >0button>
             <button class="button button-outline button-positive" ng-click="doInput(num.k);" >.button>
             <button class="button button-outline button-positive" ng-click="doInput(num.l);" >Cbutton>
             div>
             <div class="col col-offset-10">
             <button class="button button-outline button-positive" ng-click="modalNumberKeyboard.hide()" >取消button>
             <button class="button button-outline button-positive" ng-click="finishInput()">确定button>
             div>
          ion-content>
       ion-modal-view>
     script>

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

 $ionicModal.fromTemplateUrl('templates/modal_number_keyboard.html', {
   scope: $scope
  }).then(function(modal) {
   $scope.modalNumberKeyboard = modal;
 });

    $scope.currentNumber="";
 $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"};
 $scope.doInput=function(n){
    if(n=="C"){//清除键
   $scope.currentNumber="";
  }else if(n=="."){// .键
   if( $scope.currentNumber!=""&&$scope.currentNumber.indexOf(".")==-1){
    $scope.currentNumber=$scope.currentNumber+""+n;
   }
  }else if(n==0){//0键
    if($scope.currentNumber==""||$scope.currentNumber!=0||$scope.currentNumber.indexOf(".")!=-1){
     $scope.currentNumber=$scope.currentNumber+""+n;
 }
  }else if(n!=0&&n!="."&&n!="C"){//1-9键
       if($scope.currentNumber=="0"){
     $scope.currentNumber=n;
 }else{
        $scope.currentNumber=$scope.currentNumber+""+n;
       }
  }
 };
    var currentInput;
    $scope.showKeyBoard=function(t){
       $scope.modalNumberKeyboard.show();
 currentInput=t;
  };
 $scope.finishInput=function(){
      eval('$scope.'+currentInput+'=$scope.currentNumber==""?"0":$scope.currentNumber;');
  $scope.modalNumberKeyboard.hide();
 }

 代码在附件中