如何插入使用过滤器换行？ [英] How to insert a line break using a filter?

问题描述

这是我的HTML代码，我希望过滤器来执行：

This is my html for which I want the filter to execute:

<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日起，字符它转到下一行。我写的过滤器工作，但换行结果显示的是作为一个字符串，而不是作为一个换行符。该过滤器的功能是：

The logic is that if the button label is more than 10 characters, then from 11th character onwards it goes to the next line. The filter I wrote is working but the line break "
" is displaying as a string rather than acting as a line break. The filter function is:

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

如果按钮的标签是鸡它应该显示鸡线断开，然后你好，但它只是显示鸡结果你好。

If button label is Chicken it should display "Chicken" line break and then "Hello" but it is simply displaying "Chicken
Hello".

任何帮助，深受欢迎。

推荐答案

如果你想介绍＆LT; BR /＆GT; 到文本，那么你需要使用 NG-绑定-HTML 指令输出HTML，而不是 {{}值} 。

If you want to introduce <br/> into the text then you need to use ng-bind-html directive to output HTML, instead of {{value}}.

假设按钮文本的源是可信的（即不是最初是从用户或其他第三方源来），你需要使用 $ SCE 服务信任产生的价值为HTML： $ sce.trustAsHtml

Assuming the source of the button text is trusted (i.e. not originally coming from the user or another third party source), you'd need to use $sce service to "trust" the resulting value as HTML: $sce.trustAsHtml.

下面是一个例子这让＆LT; BR /＆GT; ，而不是空间：

Here's an example that puts <br/> instead of 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 说明

这篇关于如何插入使用过滤器换行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！