iLyas Dev iLyas Dev - 4 years ago 221
AngularJS Question

Fast select with Ionic

Please can anyone help me, i want to create a fast select with Ionic

Like this image :
Fast select


Answer Source

You can use angucomplete-alt. To see a demo go here.

bower install angucomplete-alt --save

Here is step-by-step how to use multiselect:

1. set angucomplete dependency from MartinNuc repo:


dependencies: {
   "angucomplete": "MartinNuc/angucomplete-alt#multiselect",

2. see updated readme for multiselect at the end of this table

3. use directive like this:

<div angucomplete-alt pause="400" remote-url="/api/endpoint?query=" selected-object="vm.addSelectedItemFromRemoteAutocomplete" search-fields="name" title-field="name" clear-selected="true" input-class="form-control form-control-small" match-class="highlight" multi-select="true" excluded-items="vm.selectedItems" exclude-on-select="true" exclusion-comparer-field="id">

Pay attention to the last 4 attributes:

  • multi-select - causes that angucomplete select will remain opened after clicking on an item
  • excluded-items - this is used to hide items that are already selected during load phrase
  • exclude-on-select - when clicking on an item it will hide it immediately after clicking on them
  • exclusion-comparer-field - this is handy when you load data from database and want to compare excluded items by some specific field and not just JS reference. We use id.

4. add vm.addSelectedItemFromRemoteAutocomplete function to your controller. This will add actually selected item to your property.

function addSelectedItemFromRemoteAutocomplete(item) {
      if (item && item.originalObject) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download