如何让输入输入显示在输出上

问题描述：

当用户在输入框中按下输入时，我希望能够反映在H1标签中。如何让输入输入显示在输出上

正如你可以看到，当用户键入线1 他们可以按Enter键，创建第2行中输入没有问题，但在h1标签的输出仍然是“1号线2号线”都在同一行。

请看小提琴，因为这将使更多的意义。

我正在考虑使用按键功能来获取当用户按下输入，然后做些什么？我不确定是否有更好的方法。

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>

你基本上要改变'\ N'成'
'，请参阅du在上面提出问题。你可以用过滤器来做到这一点，或者你可以在CSS中使用'white-space：pre'。 –

请指出这是一个AngularJS问题...标签是不够的。 – Loenix

@Loenix他们做了，标签'angularjs'是AngularJS。 –

答

您需要使用style="white-space: pre;"在代码中做到这一点。

JS Fiddle

答

我看到两种方式来实现你想要什么。

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

答

，你可以用它代替H1

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

pre元素或使用该

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

答

jQuery的方法

$("textarea").on('keypress',function(e){ 
    if(e.keyCode == 13){ 
     $('h1').html($("textarea").val()) 
    } 

})

'ng-model'已经在角度上做到了这一点，它是一种双向数据绑定。这也不能解决OP的问题。 –

如何让输入输入显示在输出上

相关推荐