ng-init 和 ng-model 给表单一个值答案

【问题标题】：ng-init and ng-model gives the form a valueng-init 和 ng-model 给表单一个值
【发布时间】：2017-11-01 11:04:44
【问题描述】：

我真的是 angularjs 的新手，想在我的 Web 应用程序中使用它的一些功能。

我想在我有一个表单的地方做一个东西，当我在上面输入时，应用程序会显示内容的预览，就像在 stackoverflow 的询问页面上一样。问题是，我想要一个像“title”这样的默认值，当我开始输入时，“title”消失了，内容显示在它的位置。我尝试使用 ng-init 和 ng-modal，但是当我将 ng-init 与 ng-modal 一起使用时，表单中会显示值“title”。我知道如何使用 ajax 来做到这一点，但对每个输入文本都这样做真的很无聊。

我不希望它在表单中显示为值，如果你知道我的意思...

关于如何使这成为可能的任何建议？

这里是sn-p：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-init="title='title'" ;>
  <form>
    <input type='text' ng-model='title'>
  </form>
  <br> {{title}}

</div>

正如您在表单中看到的那样，它具有标题作为值，我希望表单外部的标题存在，但内部的标题不存在。

【问题讨论】：

也许您正在寻找ng-placeholder？
@Azmisov 我已经得到答案了，感谢您的宝贵时间！

标签： html angularjs forms

【解决方案1】：

您只想使用 占位符。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <form>
    <input type='text' placeholder="title" ng-model='title'>
  </form>
  <br> {{title}}

</div>

没有与 Angular 的链接，只是一个基本的 HTML 功能

【讨论】：

你没有完全明白，如果我不使用 ng-init 并使用占位符，{{title}} 值是空白的，它应该是标题。
是的，因为占位符只是用来给用户一个例子。 XYZ 的解决方案可以满足您的需求。
感谢您的宝贵时间，顺便说一句，我在原始应用程序中有一个占位符；）

【解决方案2】：

在ng-init 中使用另一个变量代替模态变量，并将该变量的设置值更改为模态变量值

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-init="previewTitle='Title'" ;>
  <form>
    <input type='text' ng-model='title' ng-change="previewTitle=title">
  </form>
  <br> {{previewTitle}}

</div>

【讨论】：

感谢完美 ;)