ui-select 点击时不下拉

Question

遇到了一个很难解决的错误。我正在使用 ui-select.

实现多 select 控件

正如您在该站点的 plunks 中看到的那样，当您单击输入时，您将获得一个下拉列表。

根据我的尝试，当我点击输入时我没有得到任何东西，除非我先点击列表，然后点击列表下方大约 1 厘米（这是实际 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（在给定的 plunk 中它是如何工作的）？

一些进一步的信息。上面我提到我首先必须点击 input 然后点击它下面的 1cm。这是因为 ul 是在单击 input 时呈现的，但它的不透明度为 0。我发现为什么会在 select javascript 代码，但将其注释掉并没有真正解决任何问题。它适用于第一次点击，但所有后续点击都需要再次低于 1 厘米（即在 ul 上）。

起初我认为我使用 animate 可能是原因，但我删除了它并且问题没有解决。

我准备了一份 plunk，其中我确定了与我的项目不同的地方。我在 select.js 文件的第 1455 行添加了一个 debugger 语句。在接下来的代码块中，$animate api 为 enter 事件连接了一个处理程序。在 plunk 中，程序执行遵循该处理程序（大概是因为事件被触发）。在我的项目中，它永远不会触发。这是那个处理程序：

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

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

如有任何帮助，我们将不胜感激。干杯。

Answer 1

试试下面的代码...

<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

Answer 2

所以这是 ui-select GitHub 页面上的错误和 open issue。就我而言，我正在使用 ngAnimate 和 multi-select 功能。

ui-select 点击时不下拉

ui-select Does Not Drop Down On Click

angularjs

ui-select

angular-ui-select