Angular UI Select Highlight HTML

Question

When I am doing filtering with UI Select the added span tag is appearing as text and not being rendered as html. I have a pic below to illustrate what I am seeing. Any thoughts or ideas? Here is the markup for my UI select if it helps

                <ui-select autofocus="autofocus" ng-model="activity.activityCode" theme="bootstrap">
                <ui-select-match allow-clear="false"
                        placeholder="{{scheduler.activityModal.activityCodePlaceholder | translate}}">
                    <div class="activity-code-color" style="background-color:{{$select.selected.color}}">&nbsp;</div>
                    <div class="activity-code-item">{{$select.selected.title}}</div>
                </ui-select-match>
                <ui-select-choices repeat="act in activities | filter: { title: $select.search }">
                    <div class="row">
                        <div class="activity-code-color" style="background-color:{{act.color}}">&nbsp;</div>
                        <div class="activity-code-item">{{ act.title | highlight: $select.search }}</div>
                    </div>
                </ui-select-choices>
            </ui-select>

MarkoCen · Accepted Answer · 2015-10-24 15:42:48Z

2

Since you try to bind html template, you need to use ngBindHtml directive:

In html:

<div 
    class="activity-code-item" 
    ng-bind-html="act.title | highlight: $select.search">
</div>

API reference

answered Oct 24, 2015 at 15:42

MarkoCen

2,35417 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Angular UI Select Highlight HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related