UISelect Default choice/option

Question

I have to have a default option/choice (like 'Click to do something') in the Uiselect to which i bind data pushed from service and has refresh ( when user types something data is fetched from service based on user input.

My Current UISelect implementation is something like this

<ui-select id="agencySelect" class="form-control" ng-model="selectedAgencies.selectedAgency" theme="select2" on-select="onAgencySelected()" ng-disabled="disabled" required autofocus>
    <ui-select-match >{{$select.selected.Name}} ({{$select.selected.AgencyKey}})</ui-select-match>
    <ui-select-choices refresh="funcAsync('Agencies',$select.search)" refresh-delay="0" repeat="agency in agencies | filter:$select.search">
        <div>{{agency.Name}} ({{agency.AgencyKey}})</div>
    </ui-select-choices>
</ui-select>

I want to add a default option always to user like 'click to do something' , this is always shown to user irrespective of filtering data source.

Can we have something like this ?

     <ui-select id="agencySelect" class="form-control" ng-model="selectedAgencies.selectedAgency" theme="select2" on-select="onAgencySelected()" ng-disabled="disabled" required autofocus>
    <ui-select-match >{{$select.selected.Name}} ({{$select.selected.AgencyKey}})</ui-select-match>        
    <ui-select-choices null-label="Click to do something" refresh="funcAsync('Agencies',$select.search)" refresh-delay="0" repeat="agency in agencies | filter:$select.search">
        <div ng-trim="false">{{agency.Name}} ({{agency.AgencyKey}})</div>
    </ui-select-choices>
</ui-select>

Now Im doing this

<ui-select-choices refresh="funcAsync('Agencies',$select.search)" refresh-delay="0" repeat="agency in agencies | filter:$select.search">
        <div >{{agency.Name}} ({{agency.AgencyKey}})</div>
    </ui-select-choices>
</ui-select>

To what i want to do

    <ui-select-choices null-label="Click to do something" refresh="funcAsync('Agencies',$select.search)" refresh-delay="0" repeat="agency in agencies | filter:$select.search">
        <div>{{agency.Name}} ({{agency.AgencyKey}})</div>
    </ui-select-choices>
</ui-select>

to have this default option always available to user despite filtering.

NOTE : One way i can do is add this 'Click to do something' option to the datasource always as a first item, but i don't wanna mess with source everytime user is filtering or trying to fetch data from server.

Appreciate your help.

May i know why is this down voted ? – Sunil Vurity Jan 27 '15 at 18:18 — Sunil Vurity, Jan 27 '15 at 18:18

score 0 · Answer 1 · answered Mar 23 '15 at 16:34

it is pretty simple just add placeholder attribute to the ui-select-match directive

<ui-select ng-model="address.selected"
         theme="bootstrap"
         ng-disabled="disabled"
         reset-search-input="false"
         style="width: 300px;">
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
<ui-select-choices repeat="address in addresses track by $index"
         refresh="refreshAddresses($select.search)"
         refresh-delay="0">
  <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
</ui-select-choices>

actually this code is from the demo of the ui-select git repo it self see plunk

UISelect Default choice/option

1 Answers1