Question

我必须在Uiselect中有一个默认选项/选项（比如'点击做某事'），我绑定从服务推送的数据并刷新（当用户输入根据用户输入从服务中提取数据的东西时）。

我当前的UISelect实现是这样的

<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>

我想向用户添加默认选项，例如“点击执行某些操作”，无论过滤数据源如何，都会向用户显示此选项。

我们能有类似的东西吗？

     <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>

现在我正在做这个

<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>

到我想做的事情

    <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>

使用此默认选项始终可供用户使用，尽管已过滤。

注意：我可以做的一种方法是将数据源的“点击做某事”选项添加为第一项，但每次用户过滤或尝试从服务器获取数据时，我都不想弄乱源。

感谢您的帮助。

Answer 1

只需将占位符属性添加到ui-select-match指令

即可

<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>

实际上这段代码来自ui-select git repo的演示 plunk

UI选择默认选项/选项

1 个答案: