我刚刚开始使用 Angular JS，并且正在使用 ng-model 指令，但我不知道我做错了什么。我希望输入电子邮件值在我键入时显示在 h1 标记中。当我输入时，我几乎没有在 h1 标签中显示任何内容。
<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)
{
})
最佳答案
您的更改不会显示在屏幕上，因为在您键入电子邮件时该更改无效。无效值将作为 null 反射(reflect)到 $scope，因此没有任何内容可显示。
根据评论中的建议，您可以更改它type="text"。由于您删除了验证，您将在屏幕和 $scope 中看到文本，但您将牺牲验证。
如果您仍然想使用电子邮件验证，并且希望在 screen/$scope 中查看它，您可以使用 ng-model-options，如所述 here .
使用 ng-model-options 您可以允许将无效值存储在 $scope 中。
尝试将 ng-model-options="{allowInvalid: true}" 添加到您的 type="email" 输入中。
关于javascript - 如何在 Angular JS 中使用 ng-model 进行绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30657529/