CODEWITHSUNDEEP
angularjsbindingangular-once
Dan Beaulieu
Dan Beaulieu

Reputation: 19954

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

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?

Upvotes: 0

Views: 47

Answers (1)

Kulbhushan Singh
Kulbhushan Singh

Reputation: 536

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

Upvotes: 1

Related Questions