Question

我在angularjs应用程序中使用ui-select，该应用程序对表中的每一行重复（ng-repeat）。这是我的ui-select的代码。

<ui-select name="{{'selProperty' + $index}}" ng-model="thing.property" 
 theme="bootstrap" ng-required="true">
    <ui-select-match placeholder="PLACEHOLDER TEXT">
        {{$select.selected.displayName}}
    </ui-select-match>
    <ui-select-choices repeat="property in data.properties | filter: $select.search">
        {{property.displayName}}
    </ui-select-choices>
</ui-select>

我在$ scope.data对象上有一个列表，而包含的表使用ng-repeat="thing in data.things"。在表的每一行中都是用户填写的字段，用于设置事物的属性。下拉列表允许用户分配事物的对象属性。

首次使用时一切正常。我得到属性列表，我可以输入部分搜索来过滤列表。我选择一个，检查一下，看看它的属性设置是否正确。问题是，当我在选择一个值后重新打开下拉列表时，整个列表会显示在表的其他行上的其他ui-select框后面。我在一个非重复的页面上尝试过它，它也出现在<input type="text"></input>框后面。

我已经尝试将z-index调整为荒谬的数字而没有运气。我在选择一个值之前和之后复制了源HTML并进行了比较，但没有差异。我真的不明白为什么我的列表显示在页面上的其他输入元素后面。

Answer 1

请查看下面的github问题链接：

https://github.com/angular-ui/ui-select/issues/308

解决方案是在CSS下面添加，看看它是否适合你。

   .ui-select-choices {
    position: fixed;
    top: auto;
    left: auto;
    width: inherit;
  }

选择项目后，ui-select下拉列表将在其他字段后面打开

1 个答案: