javascript - Angular ui-select 不显示

Question

我想使用 ui-select，但它没有显示任何内容，并且开发人员控制台中没有错误。我已经在谷歌上搜索了几个小时，并且尝试了找到的所有建议，但没有任何帮助。

我使用 Chrome，并且在我的 SPA 项目中包含了 Bootstrap 版本 3.3.4 和 Angular 版本 1.4.8。我还包含了最新版本的 select.min.css 和 select.min.js。我通过 Visual Studio 2015 中的 NuGet 将 ui-select(版本 0.19.5)添加到我的项目中。

在尝试隔离问题时，我已将代码简化为一个非常简单的示例。这是我现在所拥有的(这是我的观点):

<div id="damageType" name="damageType" class="col-md-4">
    <ui-select ng-maxlength="10">

        <ui-select-choices repeat="f in ['light','hpexp']">
            {{ f }}
        </ui-select-choices>
    </ui-select>
</div>

我尝试添加 ng-hide，就像这样，但没有成功:

<div id="damageType" name="damageType" class="col-md-4">
    <ui-select ng-maxlength="10">

        <ui-select-choices repeat="f in ['light','hpexp']" ng-hide="!$select.open">
            {{ f }}
        </ui-select-choices>
    </ui-select>
</div>

这是页面中的样子。应显示下拉菜单的 div 就在那里，但它的高度为 1。此外，如您所见，控制台中没有错误:

这可能是什么问题？

Answer 1

嗨，我认为你错过了两件事。

1. ui-select 需要一个 ngModel，因此定义此 ng-model='selectedvalue'
2. 其次，我认为它需要一个ui-select-match，因为这是嵌入所需要的

下面的代码应该可以工作:

<ui-select ng-model="ctrl.selected">
 <ui-select-match placeholder="Enter an thing...">{{$select.selected}}</ui-select-match>
 <ui-select-choices repeat="item in ['1','2']">
  <span>{{item}}</span>
</ui-select-choices>