首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >没有其他html的angularjs换行符过滤器

没有其他html的angularjs换行符过滤器
EN

Stack Overflow用户
提问于 2012-12-20 11:12:32
回答 7查看 78.7K关注 0票数 88

我正在尝试将换行符(\n)转换为html br

根据this discussion in the Google Group的说法,以下是我得到的信息:

代码语言:javascript
复制
myApp.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
});

这里的讨论还建议在视图中使用以下内容:

代码语言:javascript
复制
{{ dataFromModel | newline | html }}

这似乎使用了旧的html过滤器,而现在我们应该使用ng-bind-html属性。

无论如何,这都会带来一个问题:我不希望将原始字符串(dataFromModel)中的任何超文本标记语言呈现为超文本标记语言,只希望呈现为br字符串。

例如,给定以下字符串:

7>5时的

我还是不想在这里放html和东西...

我想让它输出:

代码语言:javascript
复制
While 7 &gt; 5<br>I still don't want html &amp; stuff in here...

有什么方法可以做到这一点吗?

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2012-12-21 03:39:57

我决定只使用2个过滤器,而不是混乱的新指令:

代码语言:javascript
复制
App.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
})
.filter('noHTML', function () {
    return function(text) {
        return text
                .replace(/&/g, '&amp;')
                .replace(/>/g, '&gt;')
                .replace(/</g, '&lt;');
    }
});

然后,在我看来,我将一个连接到另一个:

代码语言:javascript
复制
<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>
票数 33
EN

Stack Overflow用户

发布于 2013-08-01 04:50:50

也许你只能通过html,一种<preformated text>的方式来实现这一点?它将避免使用过滤器或进行任何类型的处理。

您所要做的就是显示具有以下CSS的元素中的文本:

代码语言:javascript
复制
<p style="white-space: pre;">{{ MyMultiLineText}}</p>

这将解析并显示\n为新行。对我来说很有用。

这里,一个jsFiddle example

票数 281
EN

Stack Overflow用户

发布于 2013-11-06 10:11:28

一种更简单的方法是制作一个过滤器,将每个重复处的文本分割成一个列表,然后使用``ng \n

过滤器:

代码语言:javascript
复制
App.filter('newlines', function() {
  return function(text) {
    return text.split(/\n/g);
  };
});

在html中:

代码语言:javascript
复制
<span ng-repeat="line in (text | newlines) track by $index">
    <p> {{line}}</p>
    <br>
</span>
票数 26
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13964735

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档