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