Jump Break with ng-bind-html?

Question

I have an array of objects that contain an html content string. Each string contains a <br> to act as a jump break. Eg. a blog post that has an intro summary before the jump break, to reduce the amount of space on a web page.

<div ng-repeat="post in blog">
    <div ng-bind-html="post.content"></div>
</div>

That's a basic example of my code. Is there a way to hide the text after the <br> with an angular ng- without a complicated javascript filter? I imagine I could probably write CSS to handle this, but I'd like to keep the solution within the HTML file.

Answer 1

So i would use .split('<br>')[0] which will take text before

HTML

<div ng-repeat="post in blog">
    <div ng-bind-html="post.content.split('<br />')[0]"></div>
</div>

You could move this code to your controller to make html code looks readable.

HTML

<div ng-repeat="post in blog">
    <div ng-bind-html="showFirstBr(post.content)"></div>
</div>

Code

$scope.showFirstBr = function(content){
    return content.split('<br />')[0]
};

Plunkr Here