Angular ui-select占位符不起作用。

Question

我们一直在使用ui-select（https://github.com/angular-ui/ui-select）来主题下拉菜单，就像select2一样。除了一个方面，这个功能基本上是有效的：默认占位符。

代码基本上遵循ui-select演示（此页面的第三个示例：http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview）。

据我所知，缺省文本应该是“placeholder”属性的文本。而实际上，在您选择选项之前，它似乎是空白的。为了解决这个问题，我们一直在使用一个hack，即在Angular控制器中将ui-select-match的值设置为相反数，但这远非完美，显然也不是正确的用法。

<ui-select data-ng-model="producttype.selected" theme="select2" name="product-type">
    <ui-select-match placeholder="Select a product type">
        {{$select.selected.title}}
    </ui-select-match>
    <ui-select-choices repeat="producttype in productTypeOptions | filter: $select.search">
        <span ng-bind-html="producttype.title | highlight: $select.search"></span>
    </ui-select-choices>                                               
</ui-select>

有人遇到过这个问题吗？或者对我们做错了什么有任何想法吗？

这与IT技术有关。

- WillSeabrook

Answer 1

当我在控制器中绑定了ng-model的其他内容，比如producttype.selected时，我遇到了这个问题。其他绑定将初始化模型，并使ui-select指令表现得好像已经做出了选择。

如果这是你的问题，那么on-select回调函数对于将ui-select绑定到另一个对象非常有用，然后将你想要的数据合并回原始对象中。

- Steve Ellis

---

谢谢。我研究了一下，但这似乎不是问题，因为当时页面上只有一个模型。 - WillSeabrook

我遇到的问题是，我绑定的“.selected”变量被初始化为{}，这使得插件认为我已经选择了一个项目。我将其初始化为null，然后它就起作用了。 - KristofMols

Answer 2

如果禁用搜索，即使没有选择内容，也会隐藏占位符。

占位符span元素：

<span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen ng-binding ng-hide">My Placeholder</span>

只需在模板的.js文件中删除"$select.searchEnabled &&"，占位符将再次出现。

如在github上的hthabet所示

- timtom

Answer 3

如果您绑定的模型是对象的一部分，并且具有一个键/值对，其中键存在但值为null，则也会遇到此问题。

<ui-select ng-model="vm.selectedItem.ID">....

这里引用的是对象：

vm.selectedItem = {
  ID: null,
  description: null
}

这将导致选择为空，从而防止占位符显示。我目前正在寻找解决方案。

- Marcidius

Answer 4

当搜索项关闭或绑定元素为空时，UI选择不起作用。最快的方法是添加CSS display:block placeholder item。

.select2-chosen{
   display: block !important;
}

或者您可以编辑ui-select.js文件。

- Hadnazzar

Answer 5

请查看分配给占位符的Bootstrap类"text-muted"。它具有设置字体颜色为"白色"的属性。因此，请尝试注释掉此属性。这对我有效。

- voodoo_patch

Answer 6

这里的问题出在select.js文件中的isEmpty检查。

只需将此检查替换为

value = ctrl.selected; angular.isUndefined(value) || value === null || angular.equals({}, value);

即可。

- Sunny Nirala

Answer 7

不必编辑源代码，您可以采取两种方法来解决它。

1. 像下面这样打开enableSearch。

   $scope.enableSearch = function () { $scope.searchEnabled = true; };

2. 或者查看@TDing 提到或@Steve Ellis在此帖子中的答案。

- Mahib