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>

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM