javascript - Angular bootstrap-select 在选择后继续显示选项

标签 javascript angularjs twitter-bootstrap-3 bootstrap-select angular-bootstrap

我注意到 angular bootstrap select 中存在问题(演示部分) 当您选择一个选项时,这个选项会继续显示选项而不是被隐藏。 如果未使用 ng-model 属性,则此工作正常。

这是 EXAMPLE .

一段代码:

      <select toggle selectpicker ng-model="form">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
      </select>

问候,

最佳答案

似乎在 li 列表项上的指令 angular-bootstrap-select.extra 中绑定(bind)的事件在 ng-model 附加到此时不会执行。原因是:- 在指令 angular-bootstrap-select 中,当模型值更改时,它调用 element.selectpicker('refresh'); 最终在刷新方法中删除并重新创建列表项,因此在 li 上的指令 angular-bootstrap-select.extra 中绑定(bind)的点击事件将丢失。您可以通过对父级使用事件委托(delegate)来快速修复。

尝试:

 element.next().on('click', 'li', function () {
       target.toggleClass('open')
});

代替:-

 element.next().find('li').bind('click', function () {
    target.toggleClass('open')
 })

Plnkr

关于javascript - Angular bootstrap-select 在选择后继续显示选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25004697/

相关文章:

javascript - 似乎无法使用 Print.js 进行打印,当我单击打印时什么也没有出现

javascript - Ajax 循环用于 html 输出 - Bootstrap 选项卡

javascript - HTML,CSS : Change a row's border colow on hover

javascript - 删除没有 id 标签的 div

javascript - 在呈现 ajax 响应后执行 Javascript

html - 自定义复选框状态不会在 Bootstrap 崩溃时更新

twitter-bootstrap-3 - Bootstrap-列重于行

javascript - 使用 jQuery.ajax 发送带有数据 :image/png;base64 的 multipart/formdata

javascript - 带 MD 菜单的 MD 日期选择器

javascript - 我似乎无法运行 ngAnimate?