Как сделать ввод на входе, отображаемый на выходе

Question

Когда пользователь нажимает кнопку ввода в поле ввода, я бы хотел, чтобы это отразилось в теге H1.

Как вы можете видеть, когда пользователь Line 1 они могут нажмите войти и создать линии 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> 

Answer 1

Вы должны использовать style="white-space: pre;" в вашем коде, чтобы сделать это.

JS Fiddle

Answer 2

Я вижу два пути, чтобы добиться того, что вы хотите.

• Использование white-space css. В вашем случае может быть интересно значение pre-line.
• Создайте угловой filter и используйте его.

Answer 3

вы можете использовать предварительный элемент вместо h1

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

или использовать этот

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

Answer 4

Jquery подход

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

})