Текстовая область с новыми линиями после запятой Angularjs

Question

Текстовая область с новыми линиями после запятой Angularjs

0

Я новичок в интерфейсной разработке, и я пытаюсь найти лучший подход к использованию текстовой области, которая имеет новую строку после каждой запятой. Я действительно пытаюсь выяснить, какой лучший подход будет в AngularJs (фильтр, Regex и т.д.).

Теперь:

hello,how,are,you

После:

Hello
how
are
you

В настоящее время:

<textarea cols="105" rows="30" disabled="true"
          style="background-color: floralwhite; resize: none; white-space: normal; margin-top: 0px; border: none;">
    {{profile.exampleValues}}
</textarea>

Я попытался написать фильтр без везения:

.filter('newlines', function () {
     return function (text) {
         return text.replace(',', '<br/>');
     }
})

user2402107 02 авг. 2016, в 14:49

Источник

1

Новая строка \n , <br/> - это HTML-тег.
Ivanka Todorova 02 авг. 2016, в 12:40

Теги:

javascript

angularjs

css

1 ответ

Ещё вопросы

Новая строка \n , <br/> - это HTML-тег.

Alex M · Accepted Answer · 2016-08-02T10-14-00.000Z

Я обновил ваш код, чтобы заставить его работать.

Прежде всего, white-space: normal; был заменен white-space: pre-line;

Во-вторых, фильтр был улучшен, чтобы иметь дело с регулярным выражением. Согласно W3C:

Метод replace() ищет строку для указанного значения или регулярное выражение и возвращает новую строку, где указанные значения заменяются.

Примечание. Если вы заменяете значение (а не регулярное выражение), будет заменен только первый экземпляр значения. Чтобы заменить все вхождения указанного значения, используйте глобальный (g) модификатор

app.filter('newlines', function () {
  return function (text) {
    return text.replace(/,/g, '\n');
  };
});

В результате textarea должно выглядеть так:

<textarea cols="105" rows="30" disabled="true"
          style="background-color: floralwhite; white-space: pre-line; resize: none; margin-top: 0px; border: none;">
    {{profile.exampleValues | newlines}}
</textarea>

Посмотрите на Plunker.