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>

  

时间: 2024-10-06 12:21:54

Ionic之数据绑定ng-model的相关文章

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

1.RoboBinding RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.从简单的角度看,他移除了如addXXListener(),findViewById()这些不必要的代码,连如BufferKnife那样的InjectView都不需要,因为你的代码一般不需要依赖于这些界面组件信息.下面以一个最简单的AndroidMVVM为例. (1)layout 布局 <LinearLayout xmlns:android="

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

VM 主要做了两件微小的事情: 从 M 到 V 的映射(Data Binding),这样可以大量节省你人肉来 update View 的代码(将数据绑定到view) 从 V 到 M 的事件监听(DOM Listeners),这样你的 Model 会随着 View 触发事件而改变 (view改变的时候改变数据) 1.M 到 V 实现 做到这件事的第一步是形成类似于: // template var tpl = '<p>{{ text }}</p>'; // data var data

AngularJS 神奇的表单

Angular 可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括 数据绑定.建立模型属性.验证表单.验证表单后反馈信息.表单指令属性 下面我们通过案例验证他们的用法: 一.双向数据绑定(ng-model)和建立模型属性 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</tit

数据绑定

方向1(Model数据 绑定到View): <div ng-controller="myCtrl"><p>{{count}}</p> <button ng-click="add()">点我</button></div><script> var app = angular.module('myApp', ['ng']); app.controller('myCtrl', functio

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

React双向数据绑定:model改变影响view,view改变反过来影响model import React,{Component} from 'react'; class Todolist extends Component { constructor(props) { super(props); this.state = { username:"111" }; } inputChange=(e)=>{ this.setState({ username:e.target.va

angular2 学习笔记 ( Component 组件)

ng2 的组件和游览器原生的组件是同一个概念,在方方面面都很相似. 和 ng1 一样,组件少不了数据绑定 1. model to view 绑定 (单向绑定, 意思是这个值应该是只读的, 组件内部不一样修改这个值) template: ` <my-product [model-to-view-value]="'Derrick' + 'Yam'" ></my-product> ` @Input("model-to-view-value") //

AngularJS实现的一些小功能

演示AngularJS简单的双向绑定功能示例 数据双向绑定这应该算Angular比较特有的属性,概括来说,Angular通过监听变量的变化来实现双向数据绑定.传统技术上,当model改变时,开发与人员需要手动处理DOM元素并将属性反映到变化中.而在Angular中,程序员可以轻轻松松解决这种问题,省掉了很多的代码. <!--本示例演示AngularJS简单的双向绑定功能--> <!doctype html> <!--html标签上加了一个 ng-app属性,意思是整个HTML

AngularJS学习笔记(一)

前言 几个月之前了解过一点Angular,主要是通过phonecat应用程序了解一些入门东西,但是当被问及什么是Angular或者你对Angular的理解时,只记得一个MVVM双向数据绑定,显然这是不能令人满意的.现在重新来过吧. ps:该文档只是见证自己学习Angular的过程.所用版本为1.4.3.另外向大家推荐个windows下各 API离线查找工具Velocity,官网:http://velocity.silverlakesoftware.com/,真的不是一般地好用. AngularJ

7_nodejs angularjs

webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b跳转方法实现/定义处 包裹/去掉外围代码unwrap... 主题appearance 字体editor-colors&fonts-font 自动换行settings-editor-appearance-show line 显示行号..........................show line