如何使用过滤器插入换行符？

Question

这是我的 html，我希望为其执行过滤器：

<div class="col-xs-4 col-sm-15 previewBtnCont" ng-repeat="category in NavigationModel.pageArray" >
                    <button class="btn btn-lrg previewContentBtns" >
                        <div ng-bind="category.categoryDescription|filterPreviewBtnLabels"></div>
                    </button>
</div>

逻辑是，如果按钮标签超过10个字符，那么从第11个字符开始进入下一行。我编写的过滤器正在运行，但换行符“
”显示为字符串而不是换行符。过滤函数为：

common.filter('filterPreviewBtnLabels', function () {
        var testString  = "Hello";
      return function(value){
        if (!angular.isString(value)) {
            return value;
        }
        return value + "<br>" + testString;
      };
});

如果按钮标签是 Chicken，它应该显示 "Chicken" 换行符，然后显示 "Hello"，但它只是显示 "Chicken
Hello"。

欢迎任何帮助。

Answer 1

如果你想在文本中引入<br/>那么你需要使用ng-bind-html指令输出HTML，而不是{{value}}.

假设按钮文本的来源是可信的（即最初不是来自用户或其他第三方来源），您需要使用 $sce 服务来 "trust" 结果值作为 HTML: $sce.trustAsHtml.

这里有一个例子，用 <br/> 代替 space:

app.filter("break", function($sce){
  return function(value){
    if (!angular.isString(value)) return value;
    return $sce.trustAsHtml(value.split(" ").join("<br/>"));
  };
});

这是用法：

<button ng-bind-html="name | break"></button>

Plunker说明

如何使用过滤器插入换行符？

How to insert a line break using a filter?

javascript

line-breaks

filter

angularjs