zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    用Sklearn画一颗决策树
    硬核机器学习干货,手把手教你写KNN!
    nginx源码分析源码结构
    linux流量监控iftop命令安装详解
    fping简介及使用方法
    进程与线程的区别(网络摘抄)
    linux nload命令简介及安装方法
    php中heredoc使用方法
    201920201学期 20192430 《网络空间安全专业导论》第一周学习总结1
    五种I/O模型
  • 原文地址:https://www.cnblogs.com/liziyou/p/6489289.html
Copyright © 2011-2022 走看看