Adding an ellipsis using 'Angular-once' (which doesn't allow {{bind 1}{{bind 2}})

Question

I'm replacing some bindings in giant list with Angular once. However, I cant figure out how to replace the following {{}} binding with once:

I'm replacing the following working code:

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

Here's what I have so far, everything else I try fails:

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

Question:

Using Angular once, how can I accomplish the same side-by-side binding statement that was possible in native Angular?

Why not create custom `filter` to check length and append `...` after text. Then you can use both filters in same expression: `once-text="result.Question | limitTo: 175 | customFilterName"` — Kulbhushan Singh, Nov 11 '15 at 19:49
I'm new to angular, I'll look into how to make a custom filter. Thanks — Dan Beaulieu, Nov 11 '15 at 19:50
Link for custom filter: https://docs.angularjs.org/tutorial/step_09 — Kulbhushan Singh, Nov 11 '15 at 19:52

Kulbhushan Singh · Accepted Answer · 2015-12-24T07:47:49.500

1

Following ways you can write filter to add ..., it will serve the purpose of limitTo also

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

Now you can use it as follows:

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

OR

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

edited Dec 24 '15 at 07:47

answered Nov 11 '15 at 20:02

Kulbhushan Singh

536
5
18

1

I updated my question title to better suit your answer / my needs – Dan Beaulieu Nov 11 '15 at 20:06

Adding an ellipsis using 'Angular-once' (which doesn't allow {{bind 1}{{bind 2}})

Question:

1 Answers1