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. vue、react、angular三大框架对比

    前端的三大框架当属vue.react以及angular了,个人比较偏向react,它的社区比较繁荣,有很多丰富的组件 .angular的话感觉编译时间有点长,等待很恼火. vue与react vue和 ...

  2. Ruby map、each、select、inject、collect 、detect reference

    参考 https://ruby-china.org/topics/26718 map:(collect是map的别名函数) 对数组中每个元素进行表达式操作,原始数组不会被改变,返回执行表达式结果的新数 ...

  3. webpack与grunt/glub 的比较

    webpack.grunt.glub 都是前端打包的工具: grunt/gulp 的工作方式是:在一个配置文件中,指明对某些文件进行压缩.组合.检查等任务的具体步骤,然后在运行中输入相应的命令. we ...

  4. POJ3680 Intervals —— 区间k覆盖问题(最小费用流)

    题目链接:https://vjudge.net/problem/POJ-3680 Intervals Time Limit: 5000MS   Memory Limit: 65536K Total S ...

  5. damon

    不管是否有-f参数,最终程序都会进入 fuse_loop_mt 循环中,在helper.c的fuse_main_common函数中. 1. 有-f参数.这种情况下fuse_setup_common函数 ...

  6. JS截取与分割字符串常用技巧总结

    本文实例讲述了JS截取与分割字符串的常用方法.分享给大家供大家参考,具体如下: JS截取字符串可使用 substring()或者slice() 函数:substring() 定义:substring( ...

  7. [SoapUI] Common XPath expressions

    选取节点 表达式 描述 nodename 选取此节点的所有子节点. / 从根节点选取. // 从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置. . 选取当前节点. .. 选取当前节点的父节点 ...

  8. BZOJ_2225_[Spoj 2371]Another Longest Increasing_CDQ 分治+树状数组

    BZOJ_2225_[Spoj 2371]Another Longest Increasing_CDQ 分治+树状数组 Description        给定N个数对(xi, yi),求最长上升子 ...

  9. Android适合组件化开发的路由框架:Launch

    1.概述 最近越来越不想写代码了,特别是一些重复性的代码,比如由于每次启动一个 Activity,我们都会很习惯的在 Activity 中写下: public static void launch(A ...

  10. windows下安装RabbitMQ消息服务器 + 读写队列

    RabbitMQ是什么 ? RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. 1:安装RabbitMQ需要先安装Erla ...