我遇到了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>任何帮助将不胜感激。 提前谢谢。
我在ngDialog中遇到了这个(或类似的东西)。 我通过添加ng-hide属性解决了我的问题，如下所示：
<ui-select-choices repeat="..." ng-hide="!$select.open">
这解决了我在对话框中由于某种原因在内部为组件select-choices赋予ng-hide空属性的问题。 希望这也可以帮助您解决此问题。
需要添加属性：append-to-body="false"或者，如果只需要，请在 CSS 中进行更改：
body > .ui-select-bootstrap.open {
z-index: 1100; /* greater then ui bootstrap modal, that 1050 */
}
在 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{ min-height： 30px; }
我遇到了同样的问题，通过以下方式解决了它：
<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>
感谢您对我的问题的所有回答。 实际上，我一直在尝试解决此问题很长时间，最后我自己发现我想这是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>
我在使用ui-modal 时也遇到了这个问题，我使用ui-select-choices指令的"ng-class"条件解决了这个问题：
莫代尔.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;
}
'''
希望对您有所帮助。 👍
我遇到了同样的问题，要解决它，我只需安装 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>如果将行更改为：
<ui-select-choices repeat="address.name in addresses track by $index" refresh-delay="0">
http://plnkr.co/edit/ybGQ9utrxR2sr8JyVc3g?p=preview
它显示地址的名称。
选择中出现错误.js
(line 610: ctrl.searchInput.css('width', '10px');)
在本例中，输入标签的宽度为：10px。您可以单击此 10px 区域 - 它将起作用。 当我们通过 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;
}
我遇到了同样的问题，我通过添加属性append-to-body="false"来修复它。
<ui-select title="Origem" ng-disabled="disabled" append-to-body="false">
...
</ui-select>
我也有类似的问题。我通过用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>
我也有同样的问题，所以我只是改变了：
append-to-body="true"
自：
append-to-body="false"
这是ui-select 在模式中不透明度设置为 0 的问题。我尝试了很多不同的方法，但问题仍然存在。
此链接解释了该问题。
这是您可以做的：
- 添加一个布尔变量并在$scope中将其设置为 true(例如：$scope.showDD = true)
- 在 ui-select-options 中，添加以下代码：
<ui-select-choices repeat="dog in dogs" ng-show="(showDD) || ">
在这里，通过在 showDD变量周围添加大括号，我将评估优先级设置为高 showDD，并且它与其他检查 ui-select 一起 OR。由于它是 OR，showDD 会覆盖 ui-select 所做的内部检查，并且不透明度不会设置为 0。