ui-select no result event

Question

I'm using https://github.com/angular-ui/ui-select and I want to do some event or an option that will allow me to call an event (opening a modal) when no result is found while using a filter.

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

http://stackoverflow.com/questions/14615495/angularjs-placeholder-for-empty-result-from-filter — Satej S, Feb 01 '16 at 10:40

score 4 · Answer 1 · answered Sep 16 '16 at 12:48

4

You can add the <ui-select-no-choice> directive inside the ui-select directive after the ui-choices like below:

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

This will work like you wish. For reference and usage you can see ui-select-no-choice documentation

answered Sep 16 '16 at 12:48

Ragul Parani

621
7
22

This is a useful directive to know about, but it does not meet the OP's request for a solution that will "allow me to call an event (opening a modal) when no result is found while using a filter", unless requiring the user to click a button is acceptable. But my impression was that the intent was for the event to be triggered immediately. – Sean the Bean Nov 12 '16 at 22:28

brewsky · Answer 2 · 2016-02-01T11:58:41.603

0

Just add a div below your ui-select for your option using ng-if. Like so:

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

What is $search in your example?

edited Feb 01 '16 at 11:58

answered Feb 01 '16 at 11:12

brewsky

607
1
9
15

$search, is the input text I'm searching with provided by ui-select plug-in. This is valid If I'm making my own custom filter, ui-select is doing it for me. – AbdelRahman Badr Feb 01 '16 at 11:18

score 0 · Answer 3 · edited May 23 '17 at 12:13

0

I found a workaround here https://stackoverflow.com/a/32914532/4335165 by repeating the results coming from a function and handling the event on the on-select.

edited May 23 '17 at 12:13

Community

1
1

answered Feb 01 '16 at 12:46

AbdelRahman Badr

193
3
15

ui-select no result event

3 Answers3