Ng-bind-html with AngularJS filter and Angular-ui highlight

Question

I'd like to use an AngularJS filter to search for a piece of text in a table and then use Angular-ui highlight to highlight the text.

I have the following code:

Search field:

<input type="text" ng-model="searchText"/>

Table with ng-repeat and angular-ui highlight

<table ng-repeat="fruit in fruits">
    <tr>
        <td>{{ fruit.name | highlight:searchText }}</td>
        <td>{{ fruit.price }}</td>
    </tr>
</table>

But my result looks like this:

Resulting HTML

I think I should be using ng-bind-html-unsafe, but am not sure of the correct way to implement it. Any ideas?

zs2020 · Accepted Answer · 2013-09-18 23:47:10Z

3

You can try

<span ng-bind-html-unsafe="fruit.name | highlight:searchText"></span>

answered Sep 18, 2013 at 23:47

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jetcom Over a year ago

I tried that earlier (and included the angular sanitize module), but will try again.

zs2020 Over a year ago

@AndrewBoni If you use ng-bind-html, you need sanitize module, but if you the unsafe one you don't need that. (the unsafe one is not available in 1.2)

Community · Accepted Answer · 2017-05-23 12:01:20Z

1

I have solved my issue, with help from user sza.

I am using AngularJS 1.2, and need to be using ng-bind-html not ng-bind-html-unsafe. The next step was to include the angular-sanitize.js script. The last step was to include in the directive ngSanitize to app.js.

Source and additional reading here

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Sep 19, 2013 at 0:22

jetcom

9555 gold badges13 silver badges20 bronze badges

1 Comment

chris Over a year ago

Thaaaanks!!!!!! This was it: "The last step was to include in the directive ngSanitize to app.js"

Collectives™ on Stack Overflow

Ng-bind-html with AngularJS filter and Angular-ui highlight

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related