Angular ui-select 包含在 angular-ui-bootstrap 模态中时不显示选项列表

Question

我遇到了 anular-ui-bootstrap modal 指令的问题。我在我的应用程序中使用 angular 的 ui-select 组件来替代 html select。此 ui-select 在包含它的任何页面中都可以正常工作。但是当我试图将它包含在模式弹出窗口中时（使用 ui-bootstrap $modal 服务）， 下拉菜单不显示选项

问题重现here

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
  $scope.addresses = [{
  "id":1,
    "name": "chennai"
  }, {
    "id":2,
    "name": "banglore"
  }, {
    "id":3,
    "name": "madurai"
  }];
});

 <div class="modal-body">
        City
            <ui-select ng-model="selAddress">
                <ui-select-match placeholder="Choose an address">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="address in addresses track by $index" refresh-delay="0">
                    <div ng-bind-html="address.a | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
            
            Selected: <b>{{ selAddress }}</b>
        </div>

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

如果将行更改为：

<ui-select-choices repeat="address.name in addresses track by $index" refresh-delay="0">

http://plnkr.co/edit/ybGQ9utrxR2sr8JyVc3g?p=preview

显示地址名称。

Answer 2

在ui-select的select.js底部的$templateCache中，第一个模板是'bootstrap/choices.tpl.html'，其中有'ng-show=\"$select.items.length > 0\"' ，这样做的目的是在没有选择显示时隐藏下拉列表。

我认为你的问题是因为当 ui-select 在模态中呈现时，集合（在你的例子中是地址）是空的，因此它的长度是 0，因此'ng-hide' class 添加到元素中，导致问题。

我的破解方法是简单地删除 'ng-show=\"$select.items.length > 0\"'，或将其更改为 'ng-show=\"$select.items.length >= 0\"'（使其无用）。副作用是当没有可供选择的选项时，下拉菜单将显示一个空的银行列表。我更喜欢副作用，它让用户确信列表正在工作。

但是空列表的高度太窄了，所以我会添加一个 css class 让空列表高一点：

.ui-select-choices{ min-height: 30px; }

Answer 3

我运行使用 ngDialog 进入这个（或类似的东西）。我通过添加 ng-hide 属性解决了我的问题，如下所示：

<ui-select-choices repeat="..." ng-hide="!$select.open">

这解决了我在对话框中出于某种原因在内部为 select-choices 组件赋予 ng-hide 空属性的问题。希望这也能帮助您解决此问题。

Answer 4

感谢您对我的问题的所有答复。实际上，长期以来我一直在努力解决这个问题，最后我自己发现这是 AngularJS 我猜的问题。是的，我可以通过将 AngularJS 的版本从 1.2.16 更新到 1.2.20 来解决这个问题。工作 link 是 here

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

到

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script>

还有下面的小修正

<div ng-bind-html="address.a | highlight: $select.search"></div>

到

<div ng-bind-html="address.name | highlight: $select.search"></div>

Answer 5

此处出现错误 select.js

(line 610: ctrl.searchInput.css('width', '10px');)

在这种情况下，输入标签的宽度为：10px。您可以单击这个 10 像素的区域 - 它会起作用。当我们通过 bower 使用这个库时 - 我已经通过以下方式在不接触源代码的情况下修复了它：

<ui-select-match placeholder="placeholder..." ng-class="{empty: !account.roles.length}">{{::$item.name}}</ui-select-match>

因此，如果模型数组为空 - 只需将输入宽度设置为 100%。我们使用'select2'主题

.empty.ui-select-match + .select2-search-field,
.empty.ui-select-match + .select2-search-field input{
    width: 100% !important;
}

Answer 6

我遇到了同样的问题，我通过添加属性 append-to-body="false" 来修复它。

<ui-select title="Origem" ng-disabled="disabled" append-to-body="false">
 ...
</ui-select>

Answer 7

我遇到了类似的问题。我通过用 ng-if

替换 ng-show 来解决它

<button ng-click="toggle=!toggle">Toggle</button>
<div ng-if="toggle">
    <ui-select multiple ng-model="data.projectStatusArray" theme="bootstrap" ng-disabled="disabled" style="margin:0px;">
        <ui-select-match class="ui-font-medium" placeholder="Choose Filter"> {{$item.display_name}} </ui-select-match>
        <ui-select-choices repeat="fl.name as fl in filterByArray | filter: $select.search">
            {{fl.display_name}}
        </ui-select-choices>
    </ui-select>
</div>

Answer 8

需要添加属性：append-to-body="false" 或者如果您只需要，更改 CSS：

body > .ui-select-bootstrap.open {
    z-index: 1100; /* greater then ui bootstrap modal, that 1050 */
}

Answer 9

我遇到了同样的问题，解决方法是：

<div class="row" ng-controller="*protopathyUISelectCtrl as ctrl*">
  <div class="form-group m-b-sm required col-md-4 col-xs-3" >
      <div class="input-group">
        <span class="input-group-addon">test</span>
        <ui-select ng-model="ctrl.country.selected" theme="bootstrap" title="Choose a country" ng-disabled="disabled" append-to-body="false">
          <ui-select-match placeholder="test">{{$select.selected.name}}</ui-select-match>
          <ui-select-choices repeat="country in ctrl.countries | filter: $select.search">
            <span ng-bind-html="country.name | highlight: $select.search"></span>
            <small ng-bind-html="country.code | highlight: $select.search"></small>
          </ui-select-choices>
        </ui-select>
      </div>
  </div>
</div>

Answer 10

我也有同样的问题所以我只是改变了：

append-to-body="true"

至：

append-to-body="false"

Answer 11

我在使用 ui-modal 时也遇到了这个问题，我使用 'ng-class' 条件到 ui-select-choices 指令解决了这个问题：

modal.html ```

<ui-select ng-model="person.selected" theme="bootstrap" on-select="onSelect($item)" ng-click="select_open = true">
    <ui-select-match placeholder="制作者">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item in people | propsFilter: {name: $select.search, email: $select.search}" ng-class="{ 'select_open': select_open }">
        <div ng-bind-html="item.name | highlight: $select.search"></div>
        <small ng-bind-html="item.email | highlight: $select.search"></small>
    </ui-select-choices>
    <ui-select-no-choice>
        一致するものは見つかりませんでした。
    </ui-select-no-choice>
</ui-select>

```

app.js ```

$scope.onSelect = function(item) {
    $scope.open_select = false;
}

```

style.css ```

.select_open {
    opacity: 1 !important;
}

```

希望对您有所帮助。

Answer 12

这是 ui-select 在不透明度设置为 0 的模态的情况下的问题。我尝试了很多不同的方法，但问题仍然存在。

This link explains the issue.

这是你可以做的：

添加一个 bool 变量并在 $scope 中将其设置为 true（例如：$scope.showDD = true）
在ui-select-choices中，添加如下代码：

<ui-select-choices repeat="dog in dogs" ng-show="(showDD) || ">

在这里，通过在 showDD 变量周围添加大括号，我将评估优先级设置为 showDD 并与其他检查 ui-select 进行或运算。由于它是一个 OR，showDD 会覆盖 ui-select 所做的内部检查，并且不透明度不会设置为 0.

Answer 13

我遇到了同样的问题，要解决它，我只需安装 select2 https://www.npmjs.com/package/select2 并导入我使用 ui-select 的组件这个：

import uiSelect from 'ui-select'
import 'ui-select/dist/select.min.css'
import 'select2/select2.css'

const myModule = angular.module("myModule", [ uiSelect ]);

<ui-select
        multiple
        ng-model="$ctrl.personSelected"
        close-on-select="false"
        theme="select2"
        style="width:100%"
        class="form-group"
>
    <ui-select-match>{{$item}}</ui-select-match>
    <ui-select-choices repeat="person in $ctrl.listPerson">
        {{ person.name }}
    </ui-select-choices>
</ui-select>

Angular ui-select 包含在 angular-ui-bootstrap 模态中时不显示选项列表

Angular ui-select is not displaying the list of options when included in angular-ui-bootstrap modal

angularjs

angular-ui-bootstrap

bootstrap-modal

ui-select