Ionic之数据绑定ng-model
ionic 完美的融合下一代移动框架,ionic 基于Angular语法,支持 Angularjs 的特性。但是我在开发的时候,遇到了坑。因为之后用的就是angularjs,so 理所当然的以为代码应该时这样的写:
<div class="item item-input">
<span>手 机 号:</span>
<input type="text" ng-model="phone">
</div> <div class="item item-input">
<span>验 证 码:</span>
<input type="text" ng-model="code">
<button class="button button-calm" ng-click="ionGetCode()">获取验证码</button>
</div>
<div class="item item-input codeSuccess" >
<span>新 密 码:</span>
<input type="text" ng-model="newPwd">
</div>
<div class="item item-input codeSuccess" >
<span>确认密码:</span>
<input type="text" ng-model="confirm">
</div>
在页面:
{{phone}} //就可以直接获取你输入的值
但是在js中:
console.log("userName:"+$scope.userName);
console.log("$scope.phone:"+$scope.phone); //无法获取输入的值
之后查了官网文档,也查了很多资料,才知道这样写也不行的,详细解释可以去官网:http://ionicframework.com/docs/
<div class="item item-input">
<span>手 机 号:</span>
<input type="text" ng-model="$parent.phone">
</div> <div class="item item-input">
<span>验 证 码:</span>
<input type="text" ng-model="$parent.code">
<button class="button button-calm" ng-click="ionGetCode()">获取验证码</button>
</div>
<div class="item item-input codeSuccess" >
<span>新 密 码:</span>
<input type="text" ng-model="$parent.newPwd">
</div>
<div class="item item-input codeSuccess" >
<span>确认密码:</span>
<input type="text" ng-model="$parent.confirm">
</div>
Ionic之数据绑定ng-model的更多相关文章
- Android进阶笔记13:RoboBinding(实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架)
1.RoboBinding RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.从简单的角度看,他移除了如addXXListen ...
- 聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的
todo defineProperty() 参考: https://www.cnblogs.com/wangjiachen666/p/9883916.html
- angularJs:双向数据绑定
示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...
- 如何实现VM框架中的数据绑定
作者:佳杰 本文原创,转载请注明作者及出处 如何实现VM框架中的数据绑定 一:数据绑定概述 视图(view)和数据(model)之间的绑定 二:数据绑定目的 不用手动调用方法渲染视图,提高开发效率:统 ...
- Vue之双向数据绑定
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- WPF MVVM 之理解(数据绑定)
(申明:最近在做一个练习,写点东西,谨供参考.) 1.界面展示:其中的布局和样式就不说了,重点在MVVM架构和数据绑定(Model层使用EF(Entity Framework)实体框架,不做介绍). ...
- React(6) --双向数据绑定及列表数据循环
React双向数据绑定:model改变影响view,view改变反过来影响model import React,{Component} from 'react'; class Todolist ext ...
- 7_nodejs angularjs
webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b ...
- angular2 学习笔记 ( Component 组件)
refer : https://angular.cn/docs/ts/latest/guide/template-syntax.html https://angular.cn/docs/ts/late ...
随机推荐
- mongo-java-driver
http://mvnrepository.com/artifact/org.mongodb/mongo-java-driver/3.5.0 <!-- https://mvnrepository. ...
- BZOJ2327: [HNOI2011]勾股定理
BZOJ2327: [HNOI2011]勾股定理 Description 题解Here! 这是一道神题... 我一开始把题目看错了,我以为是在$n$根木棒中选两个$i,j$满足$gcd(i,j)==1 ...
- C++使用模板、函数指针、接口和lambda表达式这四种方法做回调函数的区别比较
在C++中,两个类之间存在一种关系,某个类需要另外一个类去完成某一个功能,完成了之后需要告知该类结果,这种最普通最常见的需求,往往使用回调函数来解决. 如题,我总结下来有这么四种方式可以完成这项功能, ...
- 自己写的canvas 手写画板
<!DOCTYPE html> <html> <head> <title>canvas</title> <meta charset=& ...
- 一步一步学Silverlight 2系列(29):使用Transform实现更炫的效果(上)
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(18):综合实例之RSS阅读器
一步一步学Silverlight 2系列(18):综合实例之RSS阅读器 概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支 ...
- Digit(湘潭大学比赛)
题目链接: 点击打开链接 中文问题目就不解释了. 思路,找到这个数对应的的数字是多少,然后对这个数取对应的位置. 步骤:先打表打出一位数字对应字符串的长度,两位数的,到8,9就差不多了. 先确定给定的 ...
- Getting Started with the Intel Media SDK
By Gael Hofemeier on March 19, 2015 Follow Gael on Twitter: @GaelHof Media SDK Developer’s Guide Med ...
- 怎么往mac中finder个人收藏里添加文件夹
1.打开Finder,点击左上角finder偏好设置 2.选择边栏 3.如果侧栏中没有的文件夹,直接长按文件夹直接拖入.
- I.MX6 新版u-boot分析
/******************************************************************* * I.MX6 新版u-boot分析 * 说明: * 因为一些 ...