如何在选择下拉列表中实现关闭按钮功能?

时间:2018-05-22 07:10:27

标签: angularjs selectize.js

我最近开始研究Angularjs。在我的项目中,我使用@SpringBootTest(classes = {Application.class, TestConf.class}, webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)来填充下拉菜单。我想在每个可用的下拉列表中包含清晰的十字图标(X)。我搜索了'selectize'库的官方文档,但没有找到合适的插件来执行此操作。虽然,有一些补丁,但他们没有达到标准。

我试图搜索其他模块,但没有找到任何具有这种内置功能的模块。我发现下面的代码将显示和填充下拉框。

'selectize.js'

如果能够在现有代码中实现它,我们将非常感激。

任何人都可以让我知道我应该怎样做以完成相同的当前图书馆或任何其他图书馆?

1 个答案:

答案 0 :(得分:0)

你可以在没有任何图书馆的情况下完成......

假设你有一个字符串数组

export const getlist =()=> dispatch =>{
   fetch(`api link for your list`).then(res => res.json())
            .then(data => {
              dispatch({type:'GET_NEWS' , payload:data})
            });
};

然后是样式表

<select style="display: none" ng-model="myModel" ng-disabled="ngReadonly">
      <option ng-repeat="value for value in options" ng-value="value">
        {{value}}        
      </option>
 </select>
<ul class="my-select" 
     ng-class="{'show': showOpts}"
     ng-disabled="ngReadonly"
     ng-click="showOpts = !showOpts">
    <li ng-repeat="value for value in options"

          ng-click="myModel = value">
        {{value}}<span class="select-x" ng-click="yourClick()">X</span>
    </li>
</ul>

或与图书馆

https://angular-ui.github.io/ui-select/

这是一个强大的指令,允许您做任何事情。