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. 微软下一代站点开发框架:ASP.NET MVC 6 新特性揭秘

     国内第一个<微软下一代站点开发框架:ASP.NET MVC 6 新特性揭秘 >课程 微软特邀讲师 徐雷!周六晚8点YY预定:id=28447" href="htt ...

  2. 树的深度优先遍历和广度优先遍历的原理和java实现代码

    import java.util.ArrayDeque; public class BinaryTree { static class TreeNode{ int value; TreeNode le ...

  3. IDHTTP用法详解 good

    一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接等 IDHttp的创建,需要引入ID ...

  4. MYSQL初级学习笔记八:MySQL中常用的函数!(视频序号:初级_45-50)

    知识点十:MySQL中的函数(45-50) 数学函数: 名称 描述 CEIL() 进一取整 FLOOR() 舍一取整 MOD 取余数(取摸) POWER() 幂运算 ROUND() 四舍五入 TRUN ...

  5. wukong引擎源码分析之索引——part 1 倒排列表本质是有序数组存储

    searcher.IndexDocument(0, types.DocumentIndexData{Content: "此次百度收购将成中国互联网最大并购"}) engine.go ...

  6. assign.py

    #链式赋值 m=n=[1,2,3] m[0]=2 print(m,n) #m,n都改变了 x=y='xxx' y='yyy' print(x,y) #只有y 改变 #序列解包 x,y,z=1,2,3 ...

  7. [Selenium] 操作新弹出窗口之验证标题和内容

    1)验证标题 package com.learningselenium.normalwebdriver; import static org.junit.Assert.*; import java.u ...

  8. iOS 开发图片资源选择png格式还是jpg格式

    对于iOS本地应用程序来说最简单的答案就是始终使用PNG,除非你有非常非常好的理由不用它. 当iOS应用构建的时候,Xcode会通过一种方式优化.png文件而不会优化其它文件格式.它优化得相当的好 他 ...

  9. 洛谷 P1337 平衡点 & bzoj 3680 吊打 XXX —— 模拟退火

    题目:https://www.luogu.org/problemnew/show/P1337 https://www.lydsy.com/JudgeOnline/problem.php?id=3680 ...

  10. bzoj 4260 REBXOR —— Trie树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4260 用 Trie 树可以找出前缀异或的最大值和后缀异或的最大值,拼起来即可: 注意要先加入 ...