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;
      };
});

如果按钮标签是鸡，它应该显示“鸡”换行符然后显示“你好”，但它只是显示“鸡你好”。

非常欢迎任何帮助。

Answer 1

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

假设按钮文本的来源是可信的（即最初不是来自用户或其他第三方来源），您需要使用$sce服务来“信任”结果值为HTML：{ {1}}。

以下是放置$sce.trustAsHtml而不是空格的示例：

<br/>

这就是用法：

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

Plunker来说明

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

1 个答案: