Question

当用户在输入框中按Enter键时，我希望它反映在H1标签中。

正如您可以看到用户输入的时间第1行他们可以按回车并创建输入中的第2行没有问题，但是h1标签中的输出仍然是＆＃34;第1行第2行＆＃34;一切都在一条线上。

请注意小提琴，因为这会更有意义。

我正在考虑使用按键功能来获取用户按下Enter键然后执行某些操作？我不确定是否有更好的方法。

https://jsfiddle.net/BSmyth634/ovz8thrp/

<div ng-app>
   <form>
     <textarea rows="4" type="text" ng-model="todoText" size="30" placeholder="add new todo here">
     </textarea>
   </form>
   <h1>
    {{todoText || 'Hello World'}}
   </h1>
</div>

Answer 1

您需要在代码中使用style="white-space: pre;"才能执行此操作。

JS Fiddle

Answer 2

我看到两种方法可以达到你想要的效果。

使用white-space css属性。在您的情况下，pre-line值可能很有趣。
创建Angular的filter并使用它。

Answer 3

你可以使用pre元素代替h1

<pre>{{todoText || 'Hello World'}}</pre>

或使用此

<h1 ng-repeat="line in todoText.split('\n')">
    {{line}}
</h1>

Answer 4

Jquery方法

如何在输出上输入输入

4 个答案: