[英]Textarea with New Lines after Comma Angularjs
I am new to front-end development and I am trying to figure out the best approach to utilizing a text area that has a new line after each comma. 我是前端开发的新手,我试图找出利用每个逗号后都有新行的文本区域的最佳方法。 I am really trying to figure out what the best approach would be in AngularJs(filter,Regex,etc.) 我真的想弄清楚AngularJs中最好的方法是什么(过滤器,正则表达式等)。
Now: 现在:
hello,how,are,you
After: 后:
Hello
how
are
you
currently: 目前:
<textarea cols="105" rows="30" disabled="true"
style="background-color: floralwhite; resize: none; white-space: normal; margin-top: 0px; border: none;">
{{profile.exampleValues}}
</textarea>
I tried to write a filter with no luck: 我试图写一个没有运气的过滤器:
.filter('newlines', function () {
return function (text) {
return text.replace(',', '<br/>');
}
})
I updated your code to get it working. 我更新了您的代码以使其正常运行。
First of all, white-space: normal;
首先, white-space: normal;
was replaced by white-space: pre-line;
被white-space: pre-line;
代替white-space: pre-line;
Secondly, the filter was improved to deal with a regular expression. 其次,改进了过滤器以处理正则表达式。 According to W3C : 根据W3C :
The replace() method searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced. replace()方法在字符串中搜索指定的值或正则表达式,然后返回替换了指定值的新字符串。
Note: If you are replacing a value (and not a regular expression), only the first instance of the value will be replaced. 注意:如果要替换值(而不是正则表达式),则仅替换该值的第一个实例。 To replace all occurrences of a specified value, use the global (g) modifier 要替换所有出现的指定值,请使用全局(g)修饰符
app.filter('newlines', function () {
return function (text) {
return text.replace(/,/g, '\n');
};
});
As a result, the textarea
should look like: 因此, 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.