highlight filter not working within bound value #114

cwhistler opened this Issue Jul 25, 2012 · 4 comments


None yet

2 participants


sorry if this is just a noob issue.

It seems that highlight is just another filter, so I should be able to use it like other built-in angular filters. But when I add it to a bound value I get invalid output. so I have something like this:

Search:<input ng-model="query">
<tr ng-repeat="rec in portfolio.records | filter:query | orderBy:orderProp">
    <td class="text-left">{{rec.name | highlight:query}}<br/>{{rec.accountTypeDesc | highlight:query}}</td>

And when I type 'e' into the query input I get something like this:

<span class="ui-match">E</span>LZY SMITH

then when I remove all input from the query input I get the around every letter in the output:

<span class="ui-match"></span>E<span class="ui-match"></span>L<span class="ui-match"></span>Z<span class="ui-match"></span>Y<span class="ui-match"></span> <span class="ui-match"></span>S<span class="ui-match"></span>M<span class="ui-match"></span>I<span class="ui-match"></span>T<span class="ui-match"></span>H<span class="ui-match"></span>
AngularUI member

From what I can see this might be a bug in handling of empty filtering condition. Can't look into the details now but it should be easy to fix. I can push a fix in few hours but a PR would be appreciated as well!


The issue seems related to using the filter on the bound value instead of using hardcoded text. The span noted above is displayed as text on the browser rather than evaluated. I even changed the binding to the following but get the same results:

<td class="text-left"><span ng-bind="rec.name | highlight:query">

so what do I have to do to open a PR?

AngularUI member

OK, reproduced and can confirm that this is a problem with an empty string being based as a filtering expression. Fixing.

AngularUI member

It is fixed now, the fix was done in commits from PR #117.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment