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的更多相关文章

  1. Android进阶笔记13:RoboBinding(实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架)

    1.RoboBinding RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.从简单的角度看,他移除了如addXXListen ...

  2. 聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的

    todo defineProperty() 参考: https://www.cnblogs.com/wangjiachen666/p/9883916.html

  3. angularJs:双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

  4. 如何实现VM框架中的数据绑定

    作者:佳杰 本文原创,转载请注明作者及出处 如何实现VM框架中的数据绑定 一:数据绑定概述 视图(view)和数据(model)之间的绑定 二:数据绑定目的 不用手动调用方法渲染视图,提高开发效率:统 ...

  5. Vue之双向数据绑定

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  6. WPF MVVM 之理解(数据绑定)

    (申明:最近在做一个练习,写点东西,谨供参考.) 1.界面展示:其中的布局和样式就不说了,重点在MVVM架构和数据绑定(Model层使用EF(Entity Framework)实体框架,不做介绍). ...

  7. React(6) --双向数据绑定及列表数据循环

    React双向数据绑定:model改变影响view,view改变反过来影响model import React,{Component} from 'react'; class Todolist ext ...

  8. 7_nodejs angularjs

    webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b ...

  9. angular2 学习笔记 ( Component 组件)

    refer : https://angular.cn/docs/ts/latest/guide/template-syntax.html https://angular.cn/docs/ts/late ...

随机推荐

  1. 安卓开发中使用ZXing生成解析二维码

    编码示例 package com.wolf_pan.qrcodesample; import android.graphics.Bitmap; import android.graphics.Colo ...

  2. 【转】【录教程必备】推荐几款屏幕录制工具(可录制GIF)

    我们经常会遇到一些场景,需要你向别人展示一些操作或是效果——例如告诉别人某某软件的配置步骤啊.刚设计出来网站的动画效果怎么样啊.某某电影里面的一个镜头多么经典啊.打得大快人心的NBA绝杀瞬间是怎么回事 ...

  3. HttpServletRequestWrapper模拟实现分布式Session

    HttpSession的内容都放在一个单独的Map中,模拟远程分布式Session. 1.使用HttpServletRequestWrapper创建自定义Request2.使用动态代理包装自定义Req ...

  4. IOS中UIAlertView(警告框)常用方法总结

    一.初始化方法 - (instancetype)initWithTitle:(NSString *)title message:(NSString*)message delegate:(id /*&l ...

  5. 转:Oracle:删除表空间

    原文:http://space.itpub.net/40239/viewspace-365948 OMF和非OMF管理的数据文件在DROP TABLESPACE时是否会自动删除,做了测试: SQL&g ...

  6. virtualbox 复制虚拟机提示uuid is exists

    C:\Program Files\Oracle\VirtualBox>VBoxManage.exe internalcommands sethduuid D:毛毛草\virtual\ubuntu ...

  7. iOS成员变量、实例变量、属性变量三者的联系与区别

    一.类Class中的属性property 在ios第一版中: 我们为输出口同时声明了属性和底层实例变量,那时,属性是oc语言的一个新的机制,并且要求你必须声明与之对应的实例变量,例如: 注意:(这个是 ...

  8. BZOJ1453: [WC2005]Dface双面棋盘

    离线LCT维护MST,和3082的方法一样.然而比较码农,适合颓废的时候写. PS:线段树分治要好写得多,LCT比较自娱自乐. #include<bits/stdc++.h> using ...

  9. NOIP2004题解

    传送门 考查题型 dp 搜索 模拟 数据结构堆 贪心 T1   津津的储蓄计划 题目描述 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300元钱,津津会预算这个月的花销,并且总能做到实际花销和 ...

  10. UI:一个IOS工程的标准框架

    来自cocachina 的写法 参考 声明:本文来自互联网,非本人原创,仅供参考学习使用. 我的iOS工程结构 接下来,我就简单介绍下我做iOS项目时使用的工程结构.首先要说的是,这只是我的工程结构, ...