CODEWITHSUNDEEP
angularjsui-select
Scott Walter
Scott Walter

Reputation: 9512

Angular UI Select Highlight HTML

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>

enter image description here

Upvotes: 0

Views: 2424

Answers (1)

MarkoCen
MarkoCen

Reputation: 2324

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

Upvotes: 2

Related Questions