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. 关于在PHP中当一个请求未完成时,再发起另一个请求被阻塞的问题

    最近做项目的时候遇到个问题,就是做阿里云oss大文件上传进度条显示,因为要实时查询上传分片进度,所以在上传的同时必须要再发起查询的请求,但是一直都是所有分片上传完成后查询的请求才执行,刚开始以为是阿里 ...

  2. Axios 请求配置参数详解

    axios API 可以通过向 axios 传递相关配置来创建请求 axios(config)   // 发送 POST 请求   axios({   method: 'post',   url: ' ...

  3. Python之如果添加扩展包

    1.首先下载好你需要的扩展包 下载地址是http://www.lfd.uci.edu/~gohlke/pythonlibs/ 2.将你下载好的.whl文件放在你的python文件夹中的Lib\site ...

  4. 关于include,load的几个问题

    参考:http://www.network-theory.co.uk/docs/gccintro/gccintro_17.html 1. include的文件在哪找,找不到会如何? 工具: gcc - ...

  5. VS 一些配置设置

    /************************************************************************ * VS 一些配置设置 * 说明: * 最近要用到C ...

  6. HDU4188:RealPhobia (连分数的运用之一)

    Bert is a programmer with a real fear of floating point arithmetic. Bert has quite successfully used ...

  7. 「网络流24题」「LuoguP4014」 分配问题

    Description 有 n 件工作要分配给 n 个人做.第 i 个人做第 j 件工作产生的效益为 cij.试设计一个将 n 件工作分配给 n 个人做的分配方案,使产生的总效益最大. Input 文 ...

  8. 【BZOJ 3224】 普通平衡树

    [题目链接] 点击打开链接 [算法] 本题是Splay模板题,值得一做! [代码] #include<bits/stdc++.h> using namespace std; #define ...

  9. 基于 Laravel 5 构建的、支持模块化和多语言的 CMS —— AsgardCMS

    1.简介 AsgardCMS 是基于 Laravel 5 构建的.支持模块化和多语言的CMS. 官网:https://asgardcms.com/ Github:https://github.com/ ...

  10. E20180327-hm

    renew vt. 补充; 重新开始; 使更新; 使恢复; vi. 重申,重复强调; 重新开始; renewal  n. 重建,重生; 更新,革新; 重申; 合同的续订;