使用“Angular-once”添加省略号（不允许 {{bind 1}{{bind 2}}）答案

【问题标题】：Adding an ellipsis using 'Angular-once' (which doesn't allow {{bind 1}{{bind 2}})使用“Angular-once”添加省略号（不允许 {{bind 1}{{bind 2}}）
【发布时间】：2015-11-11 19:38:34
【问题描述】：

我正在用 Angular once 替换巨型列表中的一些绑定。但是，我不知道如何用一次替换以下 {{}} 绑定：

我正在替换以下工作代码：

<div class="question">
    {{result.Question | limitTo: 175}}{{result.Question.length > 175 ? '...' : ''}}
</div>

这是我目前所拥有的，我尝试的其他一切都失败了：

<div class="question">
    <p once-text="result.Question | limitTo: 175"></p>
</div>

问题：

使用 Angular 一次，我怎样才能完成与原生 Angular 相同的并行绑定语句？

【问题讨论】：

为什么不创建自定义filter 来检查长度并在文本后附加...。然后你可以在同一个表达式中使用这两个过滤器：once-text="result.Question | limitTo: 175 | customFilterName"
我是 Angular 新手，我将研究如何制作自定义过滤器。谢谢
自定义过滤器链接：docs.angularjs.org/tutorial/step_09

标签： angularjs binding angular-once

【解决方案1】：

您可以通过以下方式编写过滤器来添加...，它也将达到limitTo的目的

moduleName.filter('addEllipsis', function() {
  return function(input, length) {
    length = length || 100; //default value for length
    return input.length > length ? input.substring(0, length) + "..." : input;
  };
});

现在你可以按如下方式使用它：

once-text="result.Question | addEllipsis" //with default length of 100

或

once-text="result.Question | addEllipsis: 175" //with explicit length

【讨论】：

我更新了我的问题标题，以更好地满足您的回答/我的需求