ui-选择无结果事件答案

【问题标题】：ui-select no result eventui-选择无结果事件
【发布时间】：2016-05-09 18:38:40
【问题描述】：

我正在使用https://github.com/angular-ui/ui-select，并且我想做一些事件或选项，以便在使用过滤器时未找到结果时调用事件（打开模式）。

<ui-select ng-model="SelectedCustomer.selected" theme="select2">
<ui-select-match placeholder="Enter Customer">
    {{$select.selected.NAME}}
</ui-select-match>
<ui-select-choices repeat="customer in Customers | filter: $select.search">
    <div ng-bind-html="customer.NAME | highlight: $select.search"></div>            
</ui-select-choices>

【问题讨论】：

stackoverflow.com/questions/14615495/…

标签： javascript angularjs ui-select

【解决方案1】：

您可以在 ui-select 指令中的 ui-choices 之后添加 <ui-select-no-choice> 指令，如下所示：

<ui-select multiple ng-model="something" >
  <ui-select-match placeholder="something" allow-clear="true">
  </ui-select-match>
  <ui-select-choices>
  </ui-select-choices>
  <ui-select-no-choice>
      This is where your code goes in. You can display some message or you can create a button too.
  </ui-select-no-choice>
</ui-select>

这将如您所愿。参考和使用可以看ui-select-no-choice documentation

【讨论】：

这是一个有用的指令，但它不符合 OP 对解决方案的要求，即“在使用过滤器”，除非要求用户单击按钮是可以接受的。但我的印象是，意图是立即触发事件。

【解决方案2】：

我在这里找到了解决方法https://stackoverflow.com/a/32914532/4335165，方法是重复来自函数的结果并在 on-select 上处理事件。

【讨论】：

【解决方案3】：

只需在您的 ui-select 下方添加一个 div 以使用 ng-if 进行选择。像这样：

 <ui-select-choices 
    ng-repeat="customer in filterSearch = ( Customers | $select.search)">
    <div ng-bind-html="customer.NAME | highlight: $select.search"></div>            
 </ui-select-choices>
<div ng-if="!filterSearch"><button ng-click="openDialog()"></button></div>

您的示例中的 $search 是什么？

【讨论】：

$search，是我正在搜索的输入文本，由 ui-select 插件提供。这是有效的如果我正在制作自己的自定义过滤器，ui-select 正在为我做这件事。