ui-select不下拉单击

Question

有一个很难解决的错误。我正在使用ui-选择实现一个多选择控件。

正如您可以从该站点的柱塞中看到的那样，当您单击输入时，您将得到一个下拉列表。

通过尝试，我在单击输入时不会得到任何信息，除非我先在列表中单击，然后单击列表下方约1cm的位置(这是实际的ul )。

否则，如果我开始打字(它会过滤和搜索)，它就会起作用。其他所有操作-- on-select和on-remove处理程序--也同样有效。

我甚至在AngularJS UI团队的站点上复制并粘贴了这些内容。

<ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="ctrl.disabled" sortable="true" close-on-select="false" style="width: 800px;">
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
<ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
  <div ng-bind-html="person.name | highlight: $select.search"></div>
  <small>
    email: {{person.email}}
    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
  </small>
</ui-select-choices>
</ui-select>

那么，为什么我必须单击实际的ul，而不是input (这就是它在给定的柱塞中的工作方式)？

一些更多的信息。上面我提到，我首先必须单击input，然后单击它下方的1cm。这是因为ul是在单击input时呈现的，但是它被赋予0的不透明度。我在select javascript代码中找到了发生这种情况的原因，但是注释掉它并没有真正解决任何问题。它适用于第一次单击，但所有后续单击都需要再次低于1cm (即在ul上)。

起初，我认为我使用动画制作可能是原因，但我删除了它，这个问题并没有得到解决。

我已经准备了一个扑通，在这里我已经确定了与我的项目不同的地方。我在debugger文件的第1455行添加了一个select.js语句。在下面的块中，一个处理程序由enter事件的$animate api连接。在plunk中，程序执行会跟随到该处理程序中(大概是因为事件被触发)。在我的项目中，它从不开火。这就是那个处理程序：

$select.$animate.on('enter', dropdown, function (elem, phase) {
if (phase === 'close' && needsCalculated) {
  calculateDropdownPosAfterAnimation();
  needsCalculated = false;
}
});                                         

奇怪的是它永远不会开火。

任何帮助都将不胜感激。干杯。

Answer 1

因此，这是一个bug和公开发行在ui选择GitHub页面。在我的例子中，我使用的是ngAnimate和multi-select特性。

Answer 2

试试下面的代码..。

<ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" 
theme="bootstrap"  sortable="true" close-on-select="false" style="width: 
 800px;">
 <ui-select-match placeholder="Select person...">{{$item.name}} &lt;
 {{$item.email}}&gt;</ui-select-match>
 <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: 
  $select.search, age: $select.search}">
  <div ng-bind="''+person.age | highlight: $select.search | highlight: 
  $select.search"></div>
  </ui-select-choices>
 </ui-select>

供您参考：https://codepen.io/mfunkie/pen/bKAaI