UISelect 默认选择/选项答案

【问题标题】：UISelect Default choice/optionUISelect 默认选择/选项
【发布时间】：2015-03-24 00:34:41
【问题描述】：

我必须在 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>

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

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

感谢您的帮助。

【问题讨论】：

我可以知道为什么这被否决了吗？

标签： angularjs ui-select

【解决方案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

【讨论】：