gpt4 book ai didi

javascript - 如何在 Angular JS 中使用 ng-model 进行绑定(bind)

转载 作者:行者123 更新时间:2023-11-28 00:13:36 25 4
gpt4 key购买 nike

我刚刚开始使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com