Question

我遇到了anular-ui-bootstrap modal指令的问题。我在我的应用中使用angular ui-select组件作为html选择的替代品。这个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

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

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

这解决了在对话框中由于某种原因组件select-choices为ng-hide提供<table> <tr> <td class="cellRight" style="cursor:pointer;"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td class="cellRight" style="border:0;color:#0066CC;" title="View summary" width="70%">92%</td> <td class="cellRight" style="border:0;" width="30%"> </td> </tr> </table> </td> </tr> <tr class="listroweven"> <td class="cellLeft" nowrap><span class="categorytab" onclick= "showAssignmentsByMPAndCourse('08/03/2015','58100:6');" title= "Display Assignments for Art 5 with Ms. Martinho"><span style= "text-decoration: underline">58100/6 - Art 5 with Ms. Martinho</span></span></td> <td class="cellLeft" nowrap> Martinho, Suzette<br> <b>Email:</b> <a href="mailto:smartinho@mtsd.us" style= "text-decoration:none"><img alt="" border="0" src= "/genesis/images/labelIcon.png" title= "Send e-mail to teacher"></a> </td> <td class="cellRight" onclick= "window.location.href = '/genesis/parents?tab1=studentdata&tab2=gradebook&tab3=coursesummary&studentid=100916&action=form&courseCode=58100&courseSection=6&mp=MP4';" style="cursor:pointer;"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td class="cellCenter"><span style= "font-style:italic;color:brown;font-size: 8pt;">No Grades</span></td> </tr> </table> </td> </tr> <tr class="listrowodd"> <td class="cellLeft" nowrap><span class="categorytab" onclick= "showAssignmentsByMPAndCourse('08/03/2015','58200:10');" title= "Display Assignments for Family and Consumer Sciences 5 with Sheerin"> <span style="text-decoration: underline">58200/10 - Family and Consumer Sciences 5 with Sheerin</span></span></td> <td class="cellLeft" nowrap> Sheerin, Susan<br> <b>Email:</b> <a href="mailto:ssheerin@mtsd.us" style= "text-decoration:none"><img alt="" border="0" src= "/genesis/images/labelIcon.png" title= "Send e-mail to teacher"></a> </td> <td class="cellRight" style="cursor:pointer;"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td class="cellCenter"><span style= "font-style:italic;color:brown;font-size: 8pt;">No Grades</span></td> </tr> </table> </td> </tr> </table>空属性的问题。希望这也可以帮助您解决这个问题。

Answer 2

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

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

Answer 3

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

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

我的黑客入侵方式只需删除'ng-show = \“$ select.items.length＆gt; 0 \”'，或将其更改为'ng-show = \“$ select.items.length＆gt ; = 0 \“'（使其无用）。副作用是当没有选择显示时，下拉列表将显示空的银行列表。我更喜欢副作用，它让用户保证列表正常工作。

但是空列表的高度太窄了，所以我会添加一个css类来使空列表更高一些：

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

Answer 4

感谢您对我的问题的所有回复。事实上，我正在努力解决这个问题很长时间，最后我自己发现，我认为这是AngularJS的一个问题。是的，我能够通过将 AngularJS的版本从1.2.16更新到1.2.20 来解决这个问题。工作链接为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

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

something

Answer 6

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

Answer 7

如果您将该行更改为：

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

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

显示地址名称。

Answer 8

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

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

Answer 9

我有类似的问题。我用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>

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

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

This link explains the issue.

这是您可以做的：

添加一个布尔变量并将其在$ 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。

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

12 个答案: