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(); }
代码在附件中
如果您觉得我的文章给了您帮助,请为我买一杯饮料吧!以下是我的支付宝,意思一下我将非常感激!
相关推荐
ionic-sublime-plugin 支持sublime2、3版本
ionic3仿京东商城源码,非常好用的ionic3学习参考资料。
IonicLab 官方下载地址被墙了。
make sure your computer install ionic 确保你的电脑安装了ionic2,不懂自行百度 second(其次): $ ionic start wechat_restaurant tutorial --v2 third(然后): find local file: /wechat_restaurant , then ...
ionic模版源代码
Mobile App Development with Ionic 2: Cross-Platform Apps with Ionic, Angular, and Cordova by Chris Griffith English | 10 Apr. 2017 | ASIN: B06Y5Q24B2 | 310 Pages | AZW3 | 2.93 MB Learn how to build ...
Ionic2 开发的android demo ,含有下拉框,输入框等主流封装的控件,快速入门
Ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用JavaScript 调用 Native 功能,ionic 自己也封装了一套漂亮的 CSS UI 库。 2.1.3 开发工具 Visual Studio Code 2.1.4 管理工具 Git 2.2 环境搭建 2.2.1...
简单的一个由ionic开发的商城demo,欢迎多提意见
ionic 5 best practices
ionic1.1.1文档史上最详细
这是一个封装好的ionic日期选择器,下载解压,点击date.html即可查看效果。
注意:使用前请确保您已经安装部署好ionic环境 搭建绿色环境:Ionic_1.x 5分钟快速搭建绿色开发环境 手动搭建环境:Ionic_2.x 手动搭建开发环境 手拉手,“互” 助后会调整美化界面 以及尝试加入调试功能和结合参考...
ionic时间日期插件
主要介绍了使用JS轻松实现ionic调用键盘搜索功能(超实用)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
Ionic Cookbook(3rd) 英文epub 第3版 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
IONIC 功能全演示 ===================== - 使用Ionic提供的UI 组件。Ionic本身是致力于建立统一的移动混合app构建平台,核心基础是Angular+Cordova。 - 通过Angular指令封装,以及预定义的CSS,提供了开箱即用的...
Hybrid Mobile Development with Ionic by Gaurav Saini English | 27 Apr. 2017 | ASIN: B01NB154W2 | 242 Pages | AZW3 | 3.49 MB Build a complete, professional-quality, hybrid mobile application with ...
Ionic Example