ui-select : There is no "X"(delete button) with selectize theme, when allow-clear="true"

but add allow-clear="true"
For Bootstrap and Select2 themes, it's working perfectly.

 

reason:

It looks like the icon/button is not present on the selectize template. 

 

before:

<ui-select ng-model="rfilter.value" name="{{rfilter.id}}" required ng-style="{'minWidth': '80px'}" theme="selectize">
                        <ui-select-match allow-clear="true" placeholder="{{rfilter.name}}">
                            {{$select.selected.name}}
                            <!--<a ng-show="$select.allowClear && !$select.isEmpty() && ($select.disabled !== true)" aria-label="Select box clear" style="padding-right: 0;" ng-click="$select.clear($event)" class="btn btn-xs btn-link pull-right">-->
                                <!--<i class="glyphicon glyphicon-remove" aria-hidden="true" style="top: 2px;"></i>-->
                            <!--</a>-->
                        </ui-select-match>
                        <ui-select-choices repeat="vvalue as vvalue in rfilter.valid_values | filter: { name: $select.search }">
                            <div ng-bind-html="vvalue.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>

 

Workaround:

<ui-select ng-model="rfilter.value" name="{{rfilter.id}}" required ng-style="{'minWidth': '80px'}" theme="selectize">
                        <ui-select-match allow-clear="true" placeholder="{{rfilter.name}}">
                            {{$select.selected.name}}
                            <a ng-show="$select.allowClear && !$select.isEmpty() && ($select.disabled !== true)" aria-label="Select box clear" style="padding-right: 0;" ng-click="$select.clear($event)" class="btn btn-xs btn-link pull-right">
                                <i class="glyphicon glyphicon-remove" aria-hidden="true" style="top: 2px;"></i>
                            </a>
                        </ui-select-match>
                        <ui-select-choices repeat="vvalue as vvalue in rfilter.valid_values | filter: { name: $select.search }">
                            <div ng-bind-html="vvalue.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>

 

posted @ 2017-05-03 17:04  画梦笙箫  Views(744)  Comments(0Edit  收藏  举报