如何在angular js中使用ng模型進行綁定

我剛開始使用angular js，並且正在玩ng-model指令，但我無法弄清楚im做錯了什麼。我希望輸入的電子郵件值在我輸入時顯示在h1標記中。當我輸入時，我幾乎沒有在h1標籤中顯示任何內容。如何在angular js中使用ng模型進行綁定

<body ng-app="starter"> 
    <ion-pane> 
     <ion-content style="margin-top: 163px"> 
      <div ng-controller="loginController"> 
       <form action=""> 
        <div class="row"> 
         <div class="col col-50 col-offset-25"> 
          <div class="card"> 
           <div class="item item-text-wrap"> 
            <div class="list"> 
             <label class="item item-input"> 
              <i class="icon ion-email placeholder  icon"></i><input type="email" placeholder="Email" ng-model="email" /> 
              <h1>{{email}}</h1> 
             </label> 
            <label class="item item-input"> 
             <i class="icon ion-locked placeholder-icon"></i><input type="text" placeholder="Password" /> 
            </label> 
            <br/> 
            <button class="button button-full button-positive">Clock Me In</button> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </form> 
     </div> 
    </ion-content> 
</ion-pane> 
</body>

這是我的javascript

var app = angular.module('starter', ['ionic']) 

app.controller('loginController', function($scope) 
{ 

})

來源

2015-06-05 user3862830

您需要傳遞控制器的值，例如$ scope.email =「[email protected]」，然後顯示在您的頁面中。 – lalitpatadiya

請注意，如果您分配了'type =「email」'，則只有當該字段有效時纔會顯示結果 –

lol這是電子郵件類型的問題。我改變我的代碼來輸入文本，它的工作。謝謝 – user3862830

，因爲當你鍵入的電子郵件是無效所做的更改不會顯示在屏幕上。無效的值反映爲$scope，因爲null，所以沒有任何顯示。

正如評論中所建議的那樣，您可以將其更改爲type="text"。由於您刪除了驗證，因此您會在屏幕上和$scope中看到文本，但是您將犧牲驗證。

如果您仍然想使用電子郵件驗證，並且想要在屏幕/ $scope中看到它，則可以使用ng-model-options，如here所述。

使用ng-model-options您可以允許將無效值存儲在您的$scope中。

嘗試在您的type="email"輸入中添加ng-model-options="{allowInvalid: true}"。

來源

2015-06-05 13:43:10

如何在angular js中使用ng模型進行綁定

回答

相關問題