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);" >6</button>
			<button class="button button-outline button-positive" ng-click="doInput(num.g);" >7</button>
            <button class="button button-outline button-positive" ng-click="doInput(num.h);" >8</button>
            <button class="button button-outline button-positive" ng-click="doInput(num.i);" >9</button>
			</div>
			<div class="col col-offset-10">
			<button class="button button-outline button-positive" ng-click="doInput(num.b);" >2</button>
            <button class="button button-outline button-positive" ng-click="doInput(num.c);" >3</button>
			<button class="button button-outline button-positive" ng-click="doInput(num.d);" >4</button>
            <button class="button button-outline button-positive" ng-click="doInput(num.e);" >5</button>
			</div>
			<div class="col col-offset-10">
			<button class="button button-outline button-positive" ng-click="doInput(num.a);" >1</button>
			<button class="button button-outline button-positive" ng-click="doInput(num.j);" >0</button>
			<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);" >C</button>
			</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>

 

   $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();
	  }

 代码在附件中

 

如果您觉得我的文章给了您帮助，请为我买一杯饮料吧！以下是我的支付宝，意思一下我将非常感激！