离子快速选择

Question

请任何人帮助我，我想创建一个快速选择与Ionic

就像这张照片：

​

​

谢谢,

Answer 1

您可以使用谷丙转氨酶。查看演示到这里去。

bower install angucomplete-alt --save

​

​

这里是一步一步地使用多选择。

1.从MartinNuc回购中设置angucomplete完全依赖关系：

/pacage.json：

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

2.参见更新的这张桌子末尾的multiselect自述

3.使用如下指令：

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

注意最后4个属性：

• multi-select -在单击某一项后，使angucomplete保持打开。
• excluded-items --用于隐藏在加载阶段已经选中的项。
• exclude-on-select -当单击一个项目时，它会在单击它们之后立即隐藏它。
• exclusion-comparer-field --当您从数据库加载数据并希望通过某些特定字段(而不仅仅是JS引用)比较排除的项时，这是非常方便的。我们使用id。

4.向控制器添加vm.addSelectedItemFromRemoteAutocomplete函数。这将将实际选定的项添加到属性中。

function addSelectedItemFromRemoteAutocomplete(item) {
      if (item && item.originalObject) {
         vm.selectedItems.push(item);
      }
    }