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

Question

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

该问题在此处重现

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>

任何帮助将非常感激。提前致谢。

score 12 · Accepted Answer

我用 ngDialog 遇到了这个（或类似的）。我通过添加ng-hide如下属性解决了我的问题：

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

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

score 9 · Accepted Answer

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

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

score 6 · Accepted Answer

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

我认为您的问题是因为当 ui-select 在模态中呈现时，集合（在您的情况下为地址）为空，因此其长度为 0，因此将“ng-hide”类添加到元素中，导致问题。

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

然而，空列表的高度太窄了，所以我会添加一个 css 类来使空列表高一点：

.ui-select-choices{ 最小高度：30px; }

score 2 · Accepted Answer

我有同样的问题，解决了：

<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>

score 1 · Accepted Answer

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

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>

```

应用程序.js ```

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

```

样式.css ```

.select_open {
    opacity: 1 !important;
}

```

希望能帮助到你。

score 1 · Accepted Answer

我遇到了同样的问题，要解决它，我只需安装 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>

score 1 · Accepted Answer

感谢您对我的问题的所有回答。实际上，我很长时间以来一直在尝试解决这个问题，最后我自己发现这是 AngularJS 的问题，我猜。是的，我可以通过将 AngularJS 的版本从 1.2.16 更新到 1.2.20来解决这个问题。工作链接在这里

<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>

score 0 · Accepted Answer

如果将行更改为：

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

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

它显示地址的名称。

score 0 · Accepted Answer

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;
}

score 0 · Accepted Answer

我有一个类似的问题。我通过替换解决了ng-show它ng-if

<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>

score 0 · Accepted Answer

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

这个链接解释了这个问题。

这是你可以做的：

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

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

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

score 0 · Accepted Answer

我有同样的问题，我通过添加属性来解决它append-to-body="false"。

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

score 0 · Accepted Answer

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

append-to-body="true"

至：

append-to-body="false"

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

13 回答 13

Related

Reference