Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Support allow clear for single entry select2 #347

Closed
dashkan opened this issue Oct 27, 2014 · 3 comments
Closed

Support allow clear for single entry select2 #347

dashkan opened this issue Oct 27, 2014 · 3 comments

Comments

@dashkan
Copy link

dashkan commented Oct 27, 2014

Select2 supports allowClear flags in single entry mode as long as placeholder is set.

Adding native support for this feature would be great.

My current workaround is to add select2-allowclear class to the ui-select element, customize the match.tpl.html template and handle the clear click event in my controller.

Markup:

<ui-select class="select2-allowclear" ng-model="request.myProp" style="width: 100%;">
    <ui-select-match placeholder="Slect My Prop">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="choice in options.choices | filter:$select.search">
        <div ng-bind-html="choice.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

Template:

<script type="text/ng-template" id="select2/match.tpl.html">
    <a class="select2-choice ui-select-match" ng-class="{'select2-default': $select.isEmpty()}" ng-click="$select.activate()">
        <span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span> 
        <abbr ng-hide="$select.isEmpty() || $select.open" class="select2-search-choice-close" ng-click="clearSelect($event, $select)"></abbr>
        <span ng-hide="$select.isEmpty()" class="select2-chosen" ng-transclude=""></span> 
        <span class="select2-arrow ui-select-toggle" ng-click="$select.toggle($event)">
            <b></b>
        </span>
    </a>
</script>

Handler:

$scope.clearSelect = function (e, select) {
    e.preventDefault();
    e.stopPropagation();
    select.selected = null;
}
@seiyria
Copy link

seiyria commented Oct 29, 2014

Ah, so this isn't possible. Thanks for making this post, saved me a bit of searching time!

@dimirc
Copy link
Contributor

dimirc commented Oct 30, 2014

Check PR #287

@dimirc
Copy link
Contributor

dimirc commented Feb 17, 2015

Should be solved with #287

@dimirc dimirc closed this as completed Feb 17, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants