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 ...
随机推荐
- asp.net下的cookieName
https://stackoverflow.com/questions/1017144/rename-asp-net-sessionid Add to your web.config:- <sy ...
- YTU 2419: C语言习题 等长字符串排序
2419: C语言习题 等长字符串排序 时间限制: 1 Sec 内存限制: 128 MB 提交: 650 解决: 249 题目描述 在主函数中输入n(n<=10)个等长的字符串.用另一函数对 ...
- Oracle备份与恢复:冷备份恢复
模拟数据库数据文件丢失的情况下,通过丢失之前的数据文件物理备份做恢复: 说明:数据文件丢失前一刻的所有归档日志都存在. 环境:oracle10g +rhel5 1.关闭数据库,copy system0 ...
- 从OutStreamWriter 和Filewriter谈Java编码
首先看JAVA API的描述: ABOUT OutputStreamWriter: "An OutputStreamWriter is a bridge from character str ...
- 「UVA524」 Prime Ring Problem 质数环
Description 输入正整数n,把整数1,2,-,n组成一个环,使得相邻两个整数之和均为素数.输出时,从整数1开始逆时针排列.同一个环恰好输出一次.n<=16. A ring is com ...
- [BZOJ 3697] 采药人的路径
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3697 [算法] 首先 , 将黑色的边变成1 ,白色的边变成-1 那么 , 问题就转化 ...
- bzoj1038&&500AC!
序列dp 先开始想了一个类似区间dp的东西...少了一维 然后发现似乎不太对,因为女生的最大差和男生的最大差并不相等 dp[i][j][x][y]表示当前有i个人,j个男生,男生和女生的后缀最大差是x ...
- 数据连接池使用方法 JADI
1.编写context.xml 文件复制到 WebRoot/META_INF/context.xml <?xml version='1.0' encoding='utf-8'?> < ...
- Objective-C中的字符串格式化输出(转载)
转自:http://www.cnblogs.com/jackbutler/archive/2012/04/05/2432828.html %@ 对象 %d, %i 整数 %u 无符整形 %f 浮点/双 ...
- emacs配置文件的基础知识 (转载)
转自:http://blog.csdn.net/schumyxp/article/details/2278268 emacs的配置文件,叫作.emacs,是个隐藏文件,存在于当前用户的根目录下面,也就 ...